Liste de tous les types de providers (service, valeur, fonction…)

Provider de type “service”

Cas d’usage : Les services d’une application Angular permettent d’encapsuler de la logique ou des données à partager entre plusieurs parties de l’application. En les déclarant dans les providers, on rend ces services injectables et utilisables partout dans l’application.

Phase I - Déclarer

Lister les classes de service dans la propriété providers du décorateur @NgModule ou @Component. Par exemple :

@NgModule({
  providers: [ AuthService, ModalService... ],
  ...
})
export class AppModule { }

Phase II - Injecter

Les services peuvent ensuite être injectés dans le constructeur d’une classe Angular, en typant les paramètres du constructeur avec des classes de service :

@Component({...})
export class AppComponent {

  constructor(private authService: AuthService,
              private modalService: ModalService) { }

}

Provider de type “valeur” (useValue)

Cas d’usage : Ce type de provider permet d’utiliser des valeurs littérales dans l’injection de dépendances. On s’en sert souvent pour les paramètres de l’application (URLs, clés d’API…), car cela permet de voir clairement quelles parties du code utilisent ces paramètres, mais aussi de facilement modifier ces paramètres dans les tests unitaires ou dans certaines parties de l’application.

Phase I - Déclarer

Lister les valeurs dans la propriété providers du décorateur @NgModule ou @Component, sous la forme d’objets { provide: KEY, useValue: VALUE }, où KEY est l’identifiant du provider et VALUE sa valeur.

Par exemple :

import {InjectionToken, NgModule} from '@angular/core';

export const API_KEY = new InjectionToken(`Clé d'API`);
export const APP_SETTINGS = new InjectionToken(`Settings de l'application`);

@NgModule({
  providers: [
    { provide: API_KEY, useValue: '67k$3g0-UvC89' },
    {
      provide: APP_SETTINGS,
      useValue: {
        appUrl: 'https://www.angularchef.com',
        isProd: true
      }
    }
  ],
  ...
})
export class AppModule { }

Remarques :

• Il est fréquent d’utiliser new InjectionToken() pour générer un identifiant unique pour chaque provider de type “valeur”. On aurait pu utiliser une chaîne littérale aussi.
• Tous les types de valeur sont supportés dans useValue (chaîne, nombre, objet, tableau…).

Phase II - Injecter

Les valeurs peuvent ensuite être injectées dans le constructeur d’une classe Angular, en décorant les paramètres du constructeur avec le décorateur @Inject(KEY), où KEY est l’identifiant du provider :

import {Component, Inject} from '@angular/core';
import {API_KEY, APP_SETTINGS} from './app.module';

@Component({...})
export class AppComponent {

  constructor(@Inject(API_KEY) private apiKey: string,
              @Inject(APP_SETTINGS) private settings: object) { }

}

Notez que c’est bien le décorateur @Inject() qui sert à résoudre l’injection ici, et que le type TypeScript est juste le type standard de la valeur (string, object…).

Provider de type “fonction” (useFactory)

Phase I - Déclarer

TBD

Phase II - Injecter

TBD

Provider de type “existant” (useExisting)

Phase I - Déclarer

TBD

Phase II - Injecter

TBD