LES SERVICES

1. QU’EST-CE QUE UN SERVICE?

Les composants ont besoin de valeurs, de propriétés, de données et de méthodes qui peuvent être
centralisées dans des services, afin de factoriser des comportements communs et de masquer les
détails des méthodes et des données aux composants.

Un service est utilisé pour les tâches qui n’impliquent pas la vue ou la logique d’un composant, mais
aux tâches telles que la récupération de données à partir du serveur, la validation des entrées
utilisateur ou la connexion directe à la console. En définissant ces tâches de traitement dans une
classe de service injectable, ces tâches seront disponibles pour n'importe quel composant.

Un service est une classe accessible à tous les composants de l’application et qui a un objectif bien
défini. Dans Angular, c’est l'injection de dépendances qui rend les services disponibles pour les
composants.

2. Injection de dépendance

L'injection de dépendance (Dependancy Injection) est la partie du framework Angular qui fournit aux
composants un accès aux services et à d'autres ressources. En effet, Angular offre la possibilité
d'injecter un service dans un composant pour le rendre accessible par ce dernier.

Le décorateur @Injectable() définit une classe comme étant un service et permet à Angular de
l'injecter dans un composant en tant que dépendance. De même, le décorateur @Injectable()
indique qu'un composant, une classe, un pipe ou un NgModule dépend d'un service.

Angular crée par défaut un injecteur à l'échelle de l'application pendant le processus de chargement.
Cet injecteur est créer dans le fichier main.ts à l’aide du code :
platformBrowserDynamic().bootstrapModule(AppModule).Il n’est, donc, pas nécessaire de
créer des injecteurs. En revanche, il faut enregistrer des fournisseurs qui rendent disponible le
service là où on a besoins. Ses fournisseurs sont appelés « Providers ».

Un provider est un objet qui indique à un injecteur comment obtenir ou créer une dépendance.

Pour toute dépendance dans une application, il faut enregistrer un fournisseur auprès de l'injecteur
de l'application, afin que l'injecteur puisse utiliser le fournisseur pour créer de nouvelles instances.
Pour un service, le fournisseur est généralement la classe du service elle-même.

3. Création d’un service

La création d’un service est possible grâce à la commande de Angular CLI :

 ng generate service nom-service
Cette commande génère le fichier nom-service.service.ts dont le squelette ressemble au code
suivant :

3BI - IHEC | Framework de développement web 1

------------------------------------------------------------------------------------------------------------------
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class MovieService {

constructor() { }
}
------------------------------------------------------------------------------------------------------------------

4. Utilisation des services

Le décorateur @injectable signifie que le service peut avoir d’autres dépendances, mais qu’il peut lui-
même être injecté dans d’autres éléments de l’application.
Angular permet d’injecter des services dans les classes des composants (par e.g le service Router
pour le routage) mais également, injecter d’autres services dans le constructeur de la classe du
service lui-même dans la méthode constructor du service.
Pour injecter un service dans un composant, il faut l’ajouter dans les paramètres de la méthode
constructor du composant comme suit :
constructor (Private paramètre : NomService). Par e.g, pour utiliser le service Router d’Angular, on
l’injecte dans la classe du composant au niveau du constructeur comme suit :
constructor (Private router : Router).
La propriété providedIn : ‘root’ signifie qu’on va utiliser la même instance du service dans toute
l’application et qu’on ne doit pas instancier la classe du service.
Pour injecter un service au niveau de l’application, il faut ajouter le service dans la propriété
providers du module souhaité.

5. Comment injecter un service ?

Un service peut être injecté au niveau de l’application ou au niveau de certains composants

appartenant, par exemple à un même module.
Pour injecter un service au niveau de l’application il faut avoir la propriété providedIn :’root’ dans
l’injecteur du service :
@Injectable({
providedIn: 'root'
})
Par contre, pour rendre un service disponible uniquement au niveau d’un module, il faut supprimer
la propriété providedIn :’root’ de l’injecteur du service et ajouter le service dans la propriété
Providers du module :
providers :[NomService1, NomService2, …]
Remarque Il est possible, également d’injecter un service dans la propriété providers d’un
composant, mais cette éventualité est rare, car dans ce cas on aura une instance du service au niveau
du composant et une autre instance au niveau de l’application ou du module, ce qui est
contradictoire avec le principe d’injection de dépendance d’Angular.

3BI - IHEC | Framework de développement web 2

 6. CONCLUSION

L’injection de dépendance Angular permet de centraliser des méthodes, des données et des valeurs
afin que tous les composants d’une application puissent en profiter. L’injection de dépendance est
un mécanisme qui garantit l’utilisation d’une même instance d’un service dans toute l’application

3BI - IHEC | Framework de développement web 3