Comprendre le Tableau 'providers' dans '@NgModule' dans Angular

Le tableau 'providers' dans la déclaration '@NgModule' d'Angular est conçu pour fournir des services disponibles pour le module. Ce tableau contient des instructions pour le système d'injection de dépendances d'Angular sur comment obtenir une valeur pour une dépendance.

En général, ce tableau peut être utilisé pour définir des services au niveau du module, ce qui signifie qu'ils peuvent être injectés dans n'importe quel autre service ou composant disponible dans le même module.

C'est comme déclarer globalement que ces services peuvent être utilisés dans toutes les parties de ce module. Cela fournit un moyen puissant de garder le code organisé et réutilisable, tout en permettant de gérer efficacement les dépendances au sein de votre application.

Comment fonctionne le tableau 'providers'?

L'Angular Injection de dépendances (DI) est une conception de conception de logiciels où une classe reçoit ses dépendances d'une source externe plutôt que de les créer elle-même. Dans Angular, la DI est utilisée pour augmenter l'efficacité et la modularité des applications web.

Lorsque vous ajoutez un service à providers, vous dites à Angular de créer une instance unique de ce service lorsqu'il est injecté pour la première fois. Angular fournit ensuite cette instance dans chaque classe qui nécessite ce service. Cela s'appelle un 'Singleton Service'.

Voici un exemple de la façon dont vous utiliserez le tableau 'providers'.

@NgModule({
  declarations: [AppComponent, ...],
  imports: [BrowserModule, ...],
  providers: [MyCustomService],
  bootstrap: [AppComponent]
})

Dans cet exemple, MyCustomService est un service créé par vous. En l'ajoutant à providers, il est maintenant disponible pour être injecté dans toute autre classe dans ce module.

Bonnes pratiques pour fournir des services

Bien que fournir des services au niveau du module soit une bonne pratique pour garantir une instance unique, cela pourrait ne pas toujours être le cas. Parfois, vous voulez que votre service soit disponible globalement ou suivre un certain 'Scope'. Angular fournit une autre méthode de fourniture de services avec l'utilisation providedIn de l'option qui fournit beaucoup plus de contrôle sur le 'Scope' du service.

Avant Angular 6, providers était le seul moyen de fournir des services, mais maintenant il est recommandé d'utiliser providedIn pour une meilleure optimisation du code et une meilleure portée du service.

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

Dans cet exemple, MySingletonService est disponible globalement dans l'application.