Achieving Dependency Injection in Angular: Understanding the Concept and Implementation

Dependency Injection (DI) is a software design pattern that allows components to be loosely coupled by delegating the responsibility of creating and managing their dependencies to an external entity. In other words, instead of a component creating its dependencies directly, the dependencies are "injected" into the component from an external source. This promotes better separation of concerns, improves testability, and makes the application more maintainable and flexible.

The core concepts of Dependency Injection in Angular are:

1. Providers: Providers are responsible for creating and managing instances of dependencies. In Angular, providers can be registered at different levels: module level, component level, or within the @Injectable() decorator of a service. Providers can be classes, values, factories, or even other services.
2. Injectors: An injector is a container that holds all the registered providers. Each Angular application has a root injector, which contains providers registered at the module level. There can be child injectors for lazy-loaded modules, components, and other hierarchical parts of the application. The injector creates and manages instances of the requested services.
3. Tokens: In DI, each dependency is associated with a unique token, which is used as an identifier for the dependency. Tokens can be either a type (class), a string, or an opaque token. When a component requests a dependency, it does so by specifying the token associated with that dependency.

Now, let's see an example of how Dependency Injection is achieved in Angular step-by-step:

Step 1: Create a Service with Dependencies

// logger.service.ts
import { Injectable } from '@angular/core';


@Injectable()
export class LoggerService {
? log(message: string): void {
? ? console.log(`[Logger]: ${message}`);
? }
}        

Step 2: Create another Service with Dependencies

// data.service.ts
import { Injectable } from '@angular/core';


@Injectable()
export class DataService {
? getData(): any[] {
? ? return ['John', 'Jane', 'Bob'];
? }
}        

Step 3: Create a Component that depends on the Services

// user.service.ts
import { Injectable } from '@angular/core';
import { LoggerService } from './logger.service';
import { DataService } from './data.service';


@Injectable()
export class UserService {
? constructor(private logger: LoggerService, private dataService: DataService) {}


? getUsers(): void {
? ? this.logger.log('Getting users from the data service...');
? ? const users = this.dataService.getData();
? ? this.logger.log('Users retrieved: ' + users.join(', '));
? }
}        

Step 4: Register the Services in the AppModule

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoggerService } from './logger.service';
import { DataService } from './data.service';
import { UserService } from './user.service';


@NgModule({
? imports: [BrowserModule],
? providers: [LoggerService, DataService, UserService],
? bootstrap: [AppComponent]
})
export class AppModule { }        

In this step, we register LoggerService, DataService, and UserService as providers in the AppModule. Now, these services are available for injection throughout the application.

Step 5: Use the Services in a Component

import { Component } from '@angular/core';
import { UserService } from './user.service';


@Component({
? selector: 'app-user',
? template: '<button (click)="getUsers()">Get Users</button>'
})
export class UserComponent {
? constructor(private userService: UserService) {}


? getUsers(): void {
? ? this.userService.getUsers();
? }
}        

In this component, we inject UserService via its constructor. When the button is clicked, the getUsers() method of the UserService is executed. The UserService itself relies on the LoggerService and DataService, which are automatically provided via DI.

Angular's DI system ensures that the appropriate instances of services are created and provided to components when they are requested. It manages the dependency tree and resolves dependencies automatically. This makes Angular applications more modular, maintainable, and testable, as components can focus on their specific responsibilities without worrying about the creation and management of their dependencies.

#angular #angularjs #angulardevelopment #typescript #programming