Angular Understanding Angulars Di Mechanism Complete Guide

Step 1: Setting Up an Angular Project

First, ensure you have Angular CLI installed. If not, you can install it by running:

npm install -g @angular/cli

Next, create a new Angular project:

ng new example-angular-di
cd example-angular-di

Step 2: Understanding the Basics of Dependency Injection

Dependency Injection (DI) is a design pattern that allows an object to receive its dependencies from an external source, rather than creating them internally. In Angular, the DI mechanism resolves and injects dependencies in components and services.

Example: Creating a Service

Let's create a simple service that provides a message.

1. Generate a service named greeting:

ng generate service greeting

2. Update the generated service src/app/greeting.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root', // This provides the service in the root injector
})
export class GreetingService {
  getGreeting() {
    return 'Hello, Angular!';
  }
}

Explanation:

• @Injectable({ providedIn: 'root' }): This decorator makes Angular include the GreetingService in the application's root injector. This means the service can be injected anywhere across the application.

Step 3: Injecting the Service into a Component

Now, let's inject the GreetingService into a component to use its getGreeting method.

1. Generate a new component named greeting:

ng generate component greeting

2. Update the GreetingComponent in src/app/greeting/greeting.component.ts to inject and use the GreetingService:

import { Component, OnInit } from '@angular/core';
import { GreetingService } from '../greeting.service';

@Component({
  selector: 'app-greeting',
  template: `
    <div>
      <h1>{{ greetingMessage }}</h1>
    </div>
  `,
  styles: [],
})
export class GreetingComponent implements OnInit {
  greetingMessage: string;

  constructor(private greetingService: GreetingService) {}

  ngOnInit() {
    this.greetingMessage = this.greetingService.getGreeting();
  }
}

3. Include the GreetingComponent in your app.component.html:

<app-greeting></app-greeting>

Step 4: Running the Application

Now, run your application to see the injected service in action:

ng serve

Visit http://localhost:4200 in your web browser. You should see the message "Hello, Angular!" displayed.

Step 5: Providing Services with Tokens

In Angular, services are identified by tokens. By default, the token is the service class itself. However, you can use custom tokens.

1. Create a custom token in src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GreetingService } from './greeting.service';
import { GreetingComponent } from './greeting/greeting.component';

import { AppComponent } from './app.component';

export const GREETING_SERVICE_TOKEN = 'GreetingServiceToken';

@NgModule({
  declarations: [AppComponent, GreetingComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: GREETING_SERVICE_TOKEN,
      useClass: GreetingService,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Update the GreetingComponent to use the custom token:

import { Component, Inject, OnInit } from '@angular/core';
import { GreetingService } from '../greeting.service';
import { GREETING_SERVICE_TOKEN } from '../app.module';

@Component({
  selector: 'app-greeting',
  template: `
    <div>
      <h1>{{ greetingMessage }}</h1>
    </div>
  `,
  styles: [],
})
export class GreetingComponent implements OnInit {
  greetingMessage: string;

  constructor(@Inject(GREETING_SERVICE_TOKEN) private greetingService: GreetingService) {}

  ngOnInit() {
    this.greetingMessage = this.greetingService.getGreeting();
  }
}

3. Run the application again:

ng serve

Visit http://localhost:4200 and you should still see "Hello, Angular!".

Explanation:

• GREETING_SERVICE_TOKEN: A custom token used to provide the GreetingService. This is useful when you want to use a different service implementation in different environments (e.g., testing).

Step 6: Understanding Hierarchical Injectors

Angular's DI mechanism supports hierarchical injectors. This means that child injectors can override providers defined in parent injectors.

1. Create a SubGreetingService in src/app/sub-greeting.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class SubGreetingService {
  getGreeting() {
    return 'Hello, SubGreeting Service!';
  }
}

2. Create a new SubGreetingComponent in src/app/sub-greeting/sub-greeting.component.ts:

import { Component, OnInit } from '@angular/core';
import { GreetingService } from '../greeting.service';

@Component({
  selector: 'app-sub-greeting',
  template: `
    <div>
      <h1>{{ greetingMessage }}</h1>
    </div>
  `,
  styles: [],
  providers: [
    { provide: GreetingService, useClass: SubGreetingService },
  ],
})
export class SubGreetingComponent implements OnInit {
  greetingMessage: string;

  constructor(private greetingService: GreetingService) {}

  ngOnInit() {
    this.greetingMessage = this.greetingService.getGreeting();
  }
}

3. Include the SubGreetingComponent in your app.component.html:

<app-greeting></app-greeting>
<app-sub-greeting></app-sub-greeting>

4. Run the application:

ng serve

Visit http://localhost:4200 and you should see "Hello, Angular!" from the GreetingComponent and "Hello, SubGreeting Service!" from the SubGreetingComponent.

Explanation:

• providers: [{ provide: GreetingService, useClass: SubGreetingService }]: This overrides the GreetingService with SubGreetingService within the scope of the SubGreetingComponent. Other components will continue to use the GreetingService provided at the root level.

Conclusion

In this guide, we walked through understanding and implementing Angular's Dependency Injection mechanism. We covered how to create and inject services, use custom tokens, and understand hierarchical injectors. By mastering these concepts, you'll be able to write more modular, testable, and maintainable Angular applications.