Vous êtes sur la page 1sur 4

Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique


Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 5 : Les services

L’objectif de cet atelier est de créer un service Angular pour la gestion des films.
Cet atelier sera fait sur le même projet déjà fait dans l’atelier 4.

Qu’est-ce qu’un service


Un service est un bout de code, une classe, qui peut contenir du code réutilisable, ou
des données qu’on veut partager entre plusieurs composants.
Service = conteneur de code réutilisable
Service = conteneur de données partagées
Service : conteneur de code réutilisable
Le premier usage d’un service, c’est de stocker de la logique applicative réutilisable.
Un service Angular possède deux caractéristiques qui en font un candidat idéal pour
cela :
• C’est un singleton, c’est à dire qu’il n’existe qu’un seul exemplaire de chaque
service pour toute l’application.
• Il est global, c’est à dire accessible dans toute l’application.
Ainsi, dans une application Angular, on trouve souvent :
• Un service qui gère l’authentification des utilisateurs.
• Un service qui gère la communication avec la base de données.
En effet, ces fonctionnalités sont susceptibles d’être (ré)utilisées n’importe où dans
l’application.

Service : conteneur de données partagées


Le deuxième usage d’un service est de stocker des données qu’on veut partager entre
plusieurs parties de l’application.
Ici encore, les deux caractéristiques “singleton” et “accessible globalement” font du
service un parfait outil pour les données partagées.
On pourrait par exemple :
• Stocker l’utilisateur en cours dans un service d’authentification, car n’importe
quelle partie de l’application est susceptible de vouloir y accéder.
• Créer un service pour gérer le contenu du panier sur un site de e-commerce.
Peut-être que l’ajout d’un article au panier depuis une page produit doit mettre à jour
le nombre total d’articles dans le panier affiché en haut de page ; ce service
permettrait de stocker le contenu du panier en un seul exemplaire et de le partager
entre plusieurs parties de l’application (la page produit et l’icône du panier).

1
Injection et instances
Pour être utilisé dans l'application, un service doit être injecté, et le niveau choisi pour
l'injection est très important. Il y a trois niveaux possibles pour cette injection :
• dans AppModule : ainsi, la même instance du service sera utilisée par tous les
components de l'application ET par les autres services ;
• dans AppComponent : comme ci-dessus, tous les components auront accès à la
même instance du service mais non les autres services ;
• dans un autre component : le component lui-même et tous ses enfants (c'est-à-
dire tous les components qu'il englobe) auront accès à la même instance du
service, mais le reste de l'application n'y aura pas accès.

Création du service

Nous allons créer un service qui permet de gérer les films. Tous les services de
l’application nous allons les mettre dans un répertoire site\services.

1. Exécuter la commande suivante pour créer le service :

ng g s site\services\films

Le CLI crée un fichier appelé films.service.ts sous le répertoire site\services.


Ouvrir le fichier crée. Remarquer l’utilisation du décorateur @Injectable qui permet de
renseigner à Angular qu’il s’agit d’un service.

Injection du service

Nous allons injecter le service dans FilmModule.

2. Ajouter le service FilmsService dans le tableau providers et n'oublier pas


d'ajouter l'import correspondant en haut du fichier.

Angular crée maintenant une instance du service Films Service pour


l'application entière. Pour l'intégrer dans un component, on le déclare
comme argument dans son constructeur.

3. Intégrer-le dans FilmsComponent (sans oublier d'ajouter l'import en haut)


comme suit :
constructor (private filmsService : FilmsService) { }

Implémenter les services

C’est le service qui va s’occuper de la gestion du tableau des films.

4. Dans le service, importer la classe Film et le fichier liste-films où se trouvent


les données (la constante FILMS).
2
5. Implémenter dans le service une méthode getFilms qui permet de renvoyer
la liste des films (c’est-à-dire la constante FILMS).

Utiliser les services

6. Dans le composant films (FilmsComponent), modifier la méthode


d'initialisation comme suit :
ngOnInit() {
//this.films = FILMS;
this.films=this.filmsService.getFilms();
}

7. On pourrait même découper notre code d'une meilleure façon, de manière


à ne pas avoir de 'logique métier' au sein de ngOnInit, mais dans une
méthode dédiée :
ngOnInit() {
//this.films = FILMS;
// this.films=this.filmsService.getFilms();
this.getFilms();
}
getFilms(): void {
this.films = this.filmsService.getFilms();
}

De cette manière, nous avons réduit le contenu de ngOnInit à l'essentiel : lorsque


le composant est initialisé, on récupère tous les films.

8. Vérifier dans le navigateur qu’on a la même interface que dans l’atelier 4.

Améliorer le code avec le service

9. Limiter le code du template du composant films pour afficher seulement la


liste des films :

3
10. Développer deux méthodes dans le service :

basculerDescriptionCachee(f: Film) qui permet de basculer la propriété


descriptionCachee de f (faire une négation ! sur la propriété booléen)

supprimerFilm(f: Film) qui supprime le film f du tableau des films


11. Utiliser les nouvelles méthodes du service dans le composant film pour
programmer les boutons plus d’informations, moins d’information et Delete.