Injection de dependances

Injection de dépendances

L'injection de dépendances (Dependency Injection, DI) est le mécanisme par lequel Angular fournit automatiquement une instance de service à qui en a besoin. Cette page couvre l'injection d'un service dans un composant, avec cours, exemple et exercice.

Prérequis : avoir lu la page Services.

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? Le mécanisme (souvent via la fonction inject()) par lequel Angular fournit automatiquement à un composant l'instance d'un service dont il a besoin.
• À quoi ça sert ? À obtenir une instance de service prête à l'emploi dans un composant, sans avoir à l'instancier soi-même avec new, et en partageant automatiquement la même instance entre plusieurs composants.
• Pourquoi ? Créer ses dépendances à la main (new MonService()) rend le code rigide et difficile à tester (impossible de remplacer facilement le service par une version simulée). L'injection de dépendances découple les composants de leurs dépendances et facilite les tests unitaires.

Sommaire

1. Injection d'une dépendance

---

1. Injection d'une dépendance

Cours

Pour utiliser un service dans un composant, on l'injecte. L'approche moderne recommandée utilise la fonction inject() (plutôt que l'injection par constructeur), qui peut être appelée directement lors de l'initialisation d'une propriété de classe.

Exemple

import { Component, inject } from '@angular/core';
import { ProduitService } from './produit';

@Component({
  selector: 'app-liste-produits',
  template: `
    <ul>
      @for (produit of produitService.getProduits()(); track produit.id) {
        <li>{{ produit.nom }}</li>
      }
    </ul>
  `,
})
export class ListeProduits {
  produitService = inject(ProduitService);
}

Comme le service est providedIn: 'root', Angular fournit automatiquement la même instance à tous les composants qui l'injectent — c'est ainsi que plusieurs composants peuvent partager le même état.

Exercice

Injecte le PanierService de la page Services dans un composant ResumePanier qui affiche le total actuel, et dans un composant AjoutArticle qui contient un bouton "Ajouter 10 €" appelant ajouterMontant(10). Vérifie que le total affiché dans ResumePanier se met à jour quand on clique sur le bouton dans AjoutArticle (les deux composants partagent la même instance du service).

Solution

// resume-panier.ts
import { Component, inject } from '@angular/core';
import { PanierService } from './panier-service';

@Component({
  selector: 'app-resume-panier',
  template: `<p>Total : {{ panierService.getTotal()() }} €</p>`,
})
export class ResumePanier {
  panierService = inject(PanierService);
}

// ajout-article.ts
import { Component, inject } from '@angular/core';
import { PanierService } from './panier-service';

@Component({
  selector: 'app-ajout-article',
  template: `<button (click)="panierService.ajouterMontant(10)">Ajouter 10 €</button>`,
})
export class AjoutArticle {
  panierService = inject(PanierService);
}

---