Déclarer une dépendance / un provider

Avant de pouvoir injecter une dépendance, il faut la déclarer en la listant dans les providers d’un module ou d’un composant. Quelle est la différence entre ces 2 options ? Laquelle faut-il choisir ?

Introduction

Il est obligatoire de déclarer les providers que vous créez pour qu’Angular puisse les reconnaître dans l’injection de dépendance. Les seuls providers qu’il ne faut pas déclarer sont ceux fournis par Angular (car dans ce cas, ils sont déjà déclarés dans un module d’Angular), ou par une librairie tierce-partie.

Prenez garde à l’endroit où vous déclarez vos providers, car cela impactera leur portée, c’est-à-dire les parties de l’application ils seront disponibles.

Déclarer un provider dans un module (@NgModule.providers)

Lister le provider dans la propriété providers du décorateur @NgModule. Par exemple :

@NgModule({
  providers: [ AuthService, ModalService... ],
  ...
})
export class AppModule { }

Dans ce cas, le provider est GLOBAL, c’est-à-dire disponible partout dans l’application. On utilise cette option pour les providers très transversaux, susceptibles d’être utilisés partout dans l’application, et qui doivent être des singletons. Exemples : service d’authentification, service d’affichage d’une modale…

Déclarer un provider dans un composant (@Component.providers)

Lister le provider dans la propriété providers du décorateur @Component. Par exemple :

@NgModule({
  selector: 'meteo',
  templateUrl: './meteo.component.html',
  providers: [ MeteoService ]
})
export class MeteoComponent { }

Dans ce cas, le provider est LOCAL, c’est-à-dire disponible uniquement dans le composant où il a été déclaré et dans ses enfants. On utilise cette option pour les providers très spécifiques, qui ne sont utilisés que dans un composant précis.

Un autre usage pour les providers de composant est de redéclarer localement un provider déjà déclaré globalement. Cela permet d’avoir une instance différente du provider pour une branche précise de l’arbre des composants.

Les différents types de provider (valeur, fonction…)

Dans cette recette, le provider utilisé était toujours un service. Mais il existe d’autres types de providers, comme des valeurs ou des fonctions. Dans ce cas, la syntaxe pour les déclarer est légèrement différente. Voir #57 Liste de tous les types de providers (service, valeur, fonction…).

Informations

Tags : servicesdi

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne