Angular Tutorial: Dependency Injection Providers 🎯

Welcome to this comprehensive guide on Dependency Injection Providers in Angular! By the end of this tutorial, you'll have a deep understanding of how to manage dependencies in your Angular applications. Let's dive right in!

What are Dependency Injection Providers? 📝

Dependency Injection (DI) is a design pattern used in software development to remove the hard-coded dependencies between objects, making them more modular and easier to test. In Angular, Dependency Injection Providers are services that create and provide the dependencies needed for a component or service.

Setting Up Providers 💡

To set up a provider, we'll use the @NgModule decorator's providers array. Let's create a simple service called GreetingService and add it as a provider.

typescript

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

@Injectable({
  providedIn: 'root' // This tells Angular to provide this service in the root module
})
export class GreetingService {
  constructor() {}

  greet() {
    return 'Hello, World!';
  }
}

Now, you can inject GreetingService into any component or service using the constructor.

typescript

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

@Component({
  selector: 'app-greeting',
  template: `
    <h1>{{ greeting }}</h1>
  `
})
export class GreetingComponent {
  greeting: string;

  constructor(private greetingService: GreetingService) {
    this.greeting = this.greetingService.greet();
  }
}

Provider Tokenization 💡

Provider tokenization allows us to have multiple instances of the same service, each with different configurations. To achieve this, we use a provide method within the @NgModule decorator's providers array.

typescript

import { NgModule } from '@angular/core';
import { GreetingService } from './greeting.service';

@NgModule({
  providers: [
    { provide: GreetingService, useClass: CustomGreetingService } // Replace GreetingService with our custom service
  ]
})
export class AppModule { }

Now, in your component, you can inject the custom GreetingService like this:

typescript

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

@Component({
  selector: 'app-greeting',
  template: `
    <h1>{{ greeting }}</h1>
  `
})
export class GreetingComponent {
  greeting: string;

  constructor(private greetingService: GreetingService) {
    this.greeting = this.greetingService.greet();
  }
}

Factory Providers 💡

Factory providers create and return an instance of a service based on a factory function. This is useful when you need to create a service instance that requires complex logic.

typescript

import { NgModule } from '@angular/core';
import { GreetingService } from './greeting.service';

@NgModule({
  providers: [
    {
      provide: GreetingService,
      useFactory: (message) => new CustomGreetingService(message)
    }
  ]
})
export class AppModule { }

In this case, the CustomGreetingService constructor accepts a message parameter, which is passed to the factory function.

typescript

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

@Injectable()
export class CustomGreetingService {
  constructor(private message: string) {}

  greet() {
    return `Hello, ${this.message}!`;
  }
}

Quiz 📝

By now, you have a good understanding of Dependency Injection Providers in Angular. Happy coding! 💻💪