Injection de dépendances : providers & inject()

Depuis la leçon 10, tes composants écrivent inject(PosteApi) sans qu'on ait dit d'où sort cet objet. Réponse : de l'injecteur d'Angular, exactement le conteneur DI que tu connais en .NET. Cette leçon transforme ce PosteApi flou en un vrai service partagé, et t'apprend à le fournir (provider) et le résoudre (inject()) au bon niveau.

1. Le problème : où vit l'état partagé ?

Notre fil rouge a une NotePosteComponent (le champ + auto-save) et, à côté, une ListePostesComponent qui affiche tous les postes. Les deux parlent des mêmes postes. Où mettre cette liste ? Pas dans l'un des deux composants — l'autre n'y aurait pas accès. La réponse : dans un service, un objet que l'injecteur fabrique une fois et distribue aux deux.

2. Le service injectable — @Injectable({ providedIn: 'root' })

On extrait toute la logique « postes » dans une classe décorée @Injectable. Le providedIn: 'root' dit à Angular : « fabrique-en une seule instance pour toute l'application, et distribue-la à qui la demande ». C'est le singleton applicatif.

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

@Injectable({ providedIn: 'root' }) // ≈ services.AddSingleton<PosteService>()
export class PosteService {
  private http = inject(HttpClient); // un service peut lui-même injecter

  private _postes = signal<Poste[]>([]); // l'état VIT dans le service
  readonly postes = this._postes.asReadonly(); // exposé en lecture seule

  charger() {
    this.http.get<Poste[]>('/api/postes')
      .subscribe(list => this._postes.set(list));
  }

  sauverNote(id: number, texte: string) {
    return this.http.put(`/api/postes/${id}/note`, { texte }); // renvoie un Observable
  }
}

Remarque le motif d'encapsulation : le signal _postes est privé et modifiable, mais on n'expose que postes en lecture seule (asReadonly()). Les composants lisent, seul le service écrit. C'est le pendant exact d'une propriété C# à private set.

3. Résoudre le service avec inject()

Côté composant, on ne fabrique jamais le service à la main (new PosteService() serait une faute) : on le demande à l'injecteur avec inject(). Comme providedIn: 'root', les deux composants reçoivent la même instance — donc le même état.

// Composant A : affiche la liste
export class ListePostesComponent {
  private service = inject(PosteService);
  postes = this.service.postes; // signal partagé

  constructor() { this.service.charger(); }
}

// Composant B : édite la note d'un poste — MÊME instance de service
export class NotePosteComponent {
  private service = inject(PosteService);
  enregistrer(id: number, texte: string) {
    this.service.sauverNote(id, texte).subscribe();
  }
}

Quand A appelle charger(), le signal postes du service se remplit — et B, qui lit le même signal, se met à jour tout seul. Aucun input, aucun événement à câbler entre A et B. C'est ça, l'état partagé par service : la réactivité des signals (leçons 06-07) traverse toute l'app via l'injecteur.

4. Providers & injecteur hiérarchique — le piège à connaître

providedIn: 'root' couvre 90 % des cas : un singleton partagé. Mais tu peux aussi fournir un service au niveau d'un composant, via providers: [...] dans son décorateur. Là, chaque instance du composant reçoit sa propre instance du service (comme un scope lié à ce sous-arbre).

@Component({
  selector: 'app-fiche-poste',
  providers: [PosteService], // ⚠️ instance DÉDIÉE à ce composant et ses enfants
  // ...
})
export class FichePosteComponent { /* ... */ }

5. Injecter autre chose qu'une classe : InjectionToken

Une classe est son propre token (sa clé dans l'injecteur). Mais comment injecter une URL d'API, un objet de config, une interface ? Une string ou une interface ne sont pas des clés uniques à l'exécution. On crée alors un InjectionToken explicite — l'équivalent du pattern Options / IOptions<T> de .NET.

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

export const API_URL = new InjectionToken<string>('API_URL');

// fourni une fois (ex. dans la config de l'app) :
// providers: [{ provide: API_URL, useValue: 'https://api.alliance.io' }]

export class PosteService {
  private url = inject(API_URL); // résolu par le token, pas par un type
}

6. Vérifie ta compréhension