Angular Factory Provider

Savais-tu que tu peux avec une factory, définir une configuration spécifique pour ton provider Angular? Le système d’injection de dépendances d’Angular est super complet et permet d’injecter avec une factory, des éléments de configuration au moment de l’instanciation du service. Dans cet article, je te montre comment créer une factory pour pouvoir configurer ton provider Angular.

Dans l’exemple qui va suivre, je te montre comment configurer un service Logger pour effectuer du reporting.

Je vais utiliser une factory pour identifier l’environnement d’exécution de mon application et induire un comportement spécifique en fonction de la valeur retournée par mes variables d’environnement.

C’est part!!

Utilisation des Providers dans Angular

Pour rappel, les Providers Angular permettent de centraliser le traitement des données dans des services dédiés et d’alléger la logique dans les Components.

Tu as remarqué que tu pouvais ajouter un provider dans un module Angular en utilisant la section « providers » du décorateur @NgModule

Cela permet d’utiliser le service dans les components du module ou le provider a été ajouté. Jusque-là rien de spécial… Mais!…

Configurer un provider avec une Factory

Avec Angular, tu peux injecter une configuration à ton service pour définir son comportement en fonction des critères que tu auras définis.

Cela évite de créer plusieurs services avec des config différentes, et l’avantage c’est que la configuration est fait au niveau du bootstrap de l’application et non lors de l’exécution du code.

Je vais donc te montrer comment tu peux configurer tes providers avec une factory Angular.

Utilisation d’une Factory

Une factory n’est rien de plus qu’une fonction qui sera exécuté et qui retourne un ensemble d’élément à injecter dans notre service.

La syntaxe est très simple du coup et ne nécessite pas grande explication:

// service Factory
const loggerFactory = () => {
  const isProd = false; // you can use Angular `environment` variables
  return new LoggerService(isProd);
}

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [
    // ajout du provider LoggerService dans le module
    {
      provide: LoggerService, // service à déclarer
      useFactory: loggerFactory // configuration avec la factory
    }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Avec cela la factory est configurée et prête à fonctionner.

Voici ce que fait le LoggerService:

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

@Injectable()
export class LoggerService {

  constructor(
    // bind with `isProd` value provided by factory with `_isDisabled`
    private _isDisabled: boolean 
  ) {}

  log(data: any): void{ 
    if (this._isDisabled) {
      console.log(`Log disabled`)
    } else {
      console.log(`Logger: `, data)
    }
  }
}

J’ai préparer un exemple sur StackBlitz pour que tu puisse voir en live comment cela fonctionne et que tu puisse reprendre le code pour ton projet.

Tu peux retrouver l’explication des Factories directement dans la doc Angular:

https://angular.io/guide/dependency-injection-providers

Utilisation des dépendances

Si une factory ou un service requière une dépendance, par exemple le module HttpClient de Angular, tu peux le passé en paramètre en définissant la propriété « deps » dans l’objet.

Conclusion

Cette manière de configurer les Providers est une manière avancée qui allège la définition des services en décentralisant leurs configurations au niveau du module qui les utilisent. 

Très pratique pour l’utilisation dans de multiples modules aux configurations diverses.

Maintenant tu sais comment configurer un provider au niveau du module, je te laisse implémenter cela dans tes projets et m’écrire si tu rencontres des problèmes d’intégration.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.