YVADEV

Injection de dépendance en Angular : Comprendre et bien l’utiliser

Injection de dépendance en Angular : Comprendre et bien l’utiliser

Qu’est-ce que l’injection de dépendance en Angular ?

L’injection de dépendance (Dependency Injection ou DI) est un modèle de conception qui permet de gérer les dépendances entre les composants d’une application Angular de manière efficace et modulaire. Angular dispose d’un système de DI natif, facilitant la gestion des services et leur partage entre différents composants.

angular injection de dépendance code exemple

Pourquoi utiliser l’injection de dépendance en Angular ?

L’utilisation de DI offre plusieurs avantages :

  • Encapsulation et réutilisabilité : Les services sont créés une seule fois et réutilisables dans plusieurs composants.
  • Testabilité accrue : Les tests unitaires sont simplifiés grâce à l’utilisation de mocks et de fakes.
  • Maintenance facilitée : La modification d’une dépendance est centralisée, évitant ainsi de multiples répercussions dans le code.

Les types d’injection de dépendance en Angular

Angular propose plusieurs types de DI :

1. Injection au niveau de la racine (Root Injection)

Ce type d’injection utilise providedIn: 'root', ce qui signifie que le service est instancié une seule fois et partagé à travers toute l’application.

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor() { }
}

2. Injection au niveau du module (Module Injection)

L’injection peut être limitée à un module spécifique en le définissant dans providers d’un @NgModule.

import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';

@NgModule({
  providers: [AuthService]
})
export class AuthModule { }

3. Injection au niveau du composant (Component Injection)

Un service peut être injecté uniquement dans un composant spécifique en le définissant dans providers du décorateur @Component.

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  providers: [AuthService]
})
export class LoginComponent {
  constructor(private authService: AuthService) { }
}

4. Injection au niveau du constructeur (Constructor Injection)

L’injection via le constructeur est la méthode recommandée pour récupérer un service dans un composant ou un autre service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }
}

5. Injection manuelle avec Injector

Il est également possible d’injecter manuellement un service via Injector.

import { Injector } from '@angular/core';
import { AuthService } from './auth.service';

const injector = Injector.create({providers: [{provide: AuthService, useClass: AuthService, deps: []}]});
const authService = injector.get(AuthService);

Bonnes pratiques pour le DI

  • Utiliser providedIn: 'root' pour les services globaux
  • Limiter l’injection aux modules ou composants nécessaires
  • Préférer l’injection via le constructeur plutôt que l’instanciation manuelle
  • Utiliser des interfaces pour définir des contrats de service

Conclusion

Le DI est un concept fondamental en Angular qui facilite la gestion des services et améliore la maintenabilité du code. En suivant les bonnes pratiques, vous garantissez un code propre, modulaire et testable.

Ressources utiles

Liens internes