Fournisseurs et portées
Contrôlez où les services résident dans l’arborescence.
Fournisseurs et portées est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Fournisseurs et portées
Un fournisseur indique à Angular comment créer une dépendance. La portée dans laquelle vous l’enregistrez détermine le nombre d’instances existantes et les éléments qui les partagent.
Portée racine
providedIn: root enregistre un service dans l’injecteur racine : un singleton partagé par toute l’application. C’est le choix le plus courant.
@Injectable({ providedIn: 'root' })
export class AppStore {}Fournisseurs de composants
Vous pouvez limiter la portée d’un service à un composant en le listant dans le tableau providers du composant. Chaque instance de ce composant obtient sa propre instance du service.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Pourquoi utiliser une portée de composant
Utilisez des fournisseurs limités au composant lorsque chaque instance de composant doit disposer de son propre état isolé, comme l’état d’un formulaire ou un magasin propre à un élément.
Racine ou composant
Racine : une instance partagée partout. Composant : une instance par instance de composant (et ses enfants). Faites votre choix selon que l’état doit être partagé ou isolé.
La hiérarchie des injecteurs
Les injecteurs Angular forment un arbre. Lorsqu’il résout une dépendance, Angular la recherche dans l’injecteur du composant, puis remonte vers les parents et termine par la racine.
Les composants enfants héritent
Un service fourni sur un composant est également disponible pour les enfants de ce composant, sauf si un enfant fournit sa propre instance, laquelle masque celle du parent.
Fournisseurs au niveau de l’application
Vous pouvez également enregistrer des fournisseurs lors de l’amorçage, dans le tableau providers de bootstrapApplication, de manière similaire à la portée racine, souvent au moyen de fonctions provide*.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass et useValue
Les fournisseurs peuvent associer un jeton à une classe avec useClass, à une valeur fixe avec useValue ou à une fabrique avec useFactory, ce qui permet la substitution et la configuration.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Remplacer les implémentations
Comme un fournisseur associe un jeton à une implémentation, vous pouvez remplacer les implémentations (par exemple par une simulation dans les tests) sans modifier les consommateurs.
Choisir une portée
Privilégiez root par défaut pour les singletons partagés. Utilisez les fournisseurs de composants uniquement lorsque vous avez besoin d’un état isolé propre à chaque instance.
Vérification rapide : portées
État propre à chaque instance.
Récapitulatif : fournisseurs et portées
Vous avez appris que les fournisseurs décrivent comment créer des dépendances et que la portée contrôle la création des instances : root pour les singletons à l’échelle de l’application, et les fournisseurs de composants pour l’isolation propre à chaque instance. Angular effectue la résolution via une hiérarchie d’injecteurs, et useClass/useValue/useFactory permettent de remplacer les implémentations. Ensuite : les jetons d’injection.
Questions Fréquemment Posées
La leçon « Fournisseurs et portées » est-elle gratuite ?
Oui — le texte complet de « Fournisseurs et portées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fournisseurs et portées » ?
Contrôlez où les services résident dans l’arborescence. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Fournisseurs et portées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Services et Injectable
- La fonction inject
- Fournisseurs et portées
- Jetons d’injection