23. Fournisseurs et Portée (Scoping)

Les fournisseurs (Providers) indiquent à Angular comment créer une instance d'une dépendance. La portée (Scoping) dicte où cette instance est disponible et quelle est sa durée de vie.

Emplacements de configuration des fournisseurs

1. Racine (Singleton) : Utilisation de providedIn: 'root' dans le décorateur du service. Le service est disponible partout et est un véritable singleton.

2. Portée du Module : Inscription du service dans le tableau providers d'un NgModule spécifique (ex: AppModule). Le service est limité à tous les composants déclarés dans ce module ou les modules qui l'importent.

3. Portée du Composant : Inscription du service dans le tableau providers des métadonnées d'un composant spécifique (@Component).

Comportement de la portée du composant

Lorsqu'un service est fourni au niveau d'un composant, Angular crée une nouvelle instance pour ce composant spécifique et tous ses enfants. Si le composant est détruit, l'instance du service l'est aussi. Cela crée des instances multiples et indépendantes du service.

Exemple de service à portée de composant :

typescript import { CounterService } from './counter.service';

@Component({ selector: 'app-component-scoped', templateUrl: './component-scoped.component.html', providers: [CounterService] // Nouvelle instance pour ce composant et ses enfants }) export class ComponentScopedComponent { // ... injection dans le constructeur }

Quelle portée utiliser ?

• Racine (Root) : Pour l'état global, le logging, la configuration et les services de récupération de données (cas le plus courant).
• Module : Pour les dépendances spécifiques à une fonctionnalité (ex: fournir des validateurs de formulaire spécialisés uniquement pour un module 'Settings').
• Composant : Pour des services temporaires ou isolés (ex: un service pour gérer l'état d'une fenêtre modale unique et complexe).

Comprendre la portée est critique pour gérer l'état et éviter le partage de données involontaire.