On connait tous le concept de l’injection de dépendances, qui brièvement, permet de fournir des objets ou des services à d’autres composants ou services, sans avoir à le créer directement.

Dans Angular, l’injection de dépendances est gérée par le système intégré dédié à cette tâche. Ce système consiste en un conteneur qui maintient une liste d’objets ou de services disponibles pour injection. Lorsqu’un composant ou un service a besoin d’un objet ou d’un service spécifique, il peut simplement déclarer cette dépendance et le système d’injection va la fournir.

Mais attendez, ça devient encore plus intéressant. Avez-vous déjà entendu parler des Injection Tokens ? C’est comme l’injection de dépendances, mais en mieux. Vous pouvez injecter n’importe quel objet, même ceux qui ne sont pas des services. 

Utilisation d’injection tokens
Supposons que vous ayez besoin d’une configuration pour votre application. Vous voulez avoir une seule configuration pour l’ensemble de votre application, mais vous souhaitez pouvoir la remplacer facilement pour les tests ou en fonction de l’environnement de déploiement. Vous pouvez utiliser les Injection Tokens pour cela.

Tout d’abord, vous pouvez définir votre Injection Token pour la configuration en utilisant la classe InjectionToken fournie par Angular :

10 mai 2023
Par Haythem BELHADJ
Formez-vous avec la Creative Tech Academy !

Notre objectif : vous outiller pour être en mesure de répondre différemment et collectivement aux problèmes qui font partis de votre quotidien professionnel.

Les formations de la Creative Tech Academy

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

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

export interface AppConfig {
  apiUrl: string;
  enableFeatureX: boolean;
  // ...
}

Ici, nous avons défini un injection token nommé ‘APP_CONFIG’ pour notre configuration d’application.

L’injection token est un objet de type InjectionToken<AppConfig>,  qui définit le type de l’objet injecté comme une interface AppConfig.

Ensuite, vous pouvez fournir une valeur pour cet Injection Token dans votre module principal, ou tout autre module où vous souhaitez utiliser la configuration :

import { NgModule } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app-config';

const appConfig: AppConfig = {
  apiUrl: 'http://my-api.com',
  enableFeatureX: true,
  // ...
};

@NgModule({
  providers: [
    { provide: APP_CONFIG, useValue: appConfig }
  ]
})
export class AppModule { }

Ici, nous fournissons une valeur pour l’Injection Token APP_CONFIG en utilisant le provide et useValue syntaxe. Nous fournissons une instance de la configuration d’application appConfig.

Maintenant, vous pouvez utiliser l’Injection Token APP_CONFIG pour injecter la configuration dans vos composants et services :

import { Component, Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app-config';

@Component({
  selector: 'app-my-component',
  template: `...`,
})
export class MyComponent {
  constructor(@Inject(APP_CONFIG) private config: AppConfig) {}
  
  ngOnInit() {
    console.log(this.config.apiUrl); // 'http://my-api.com'
    console.log(this.config.enableFeatureX); // true
    // ...
  }
}

Ici, nous injectons la configuration d’application dans notre composant MyComponent en utilisant l’Injection Token APP_CONFIG. Nous déclarons la dépendance sur la configuration en utilisant le décorateur @Inject fourni par Angular, et nous la récupérons dans le constructeur de notre composant.

Injection tokens, une solution flexible
En résumé, les Injection Tokens sont un moyen pratique de fournir des dépendances personnalisées à vos composants et services en Angular. Vous pouvez les utiliser pour fournir des valeurs, des objets, ou même des services en tant que dépendances en fonction de vos besoins spécifiques.

Autres cas d’utilisation de l’injection tokens : 

  • Personnalisation de thèmes : si votre application doit prendre en charge plusieurs thèmes, vous pouvez utiliser un Injection Token pour fournir le thème actuel à tous les composants qui en ont besoin. Cela permet de centraliser la gestion du thème et de le changer facilement si nécessaire.
  • Configuration de l’application : si votre application nécessite des configurations spécifiques, telles que l’URL du serveur ou des paramètres de sécurité, vous pouvez utiliser un Injection Token pour fournir ces configurations à tous les composants qui en ont besoin. Cela permet de centraliser la gestion des configurations et de les changer facilement si nécessaire.
  • Utilisation de services tiers : si vous utilisez des services tiers dans votre application, tels que des outils d’analyse ou de suivi, vous pouvez utiliser un Injection Token pour fournir les clés ou les identifiants à tous les composants qui en ont besoin. Cela permet de centraliser la gestion des clés et des identifiants et de les changer facilement si nécessaire.

En ayant recours à des Injection Tokens dans ces cas d’utilisation, vous facilitez la gestion de votre application et rendez votre code plus modulaire et plus facile à maintenir.

Partager
Faire suivre