Institut Supérieur des Etudes Technologiques de Sousse
Atelier Framework
DépartementCôté clientde: l’Informatique
de Technologies Angular
Matière : AtelierPolytech
FrameWorkSousse
Côté Serveur Classe : DSI 2.1
A.U: 2023/2024
Enseignante : Raja ABDELMOUMEN A. U. : 2021/2022 – Semestre 1
Atelier 5 : Les services Angular
Objectif de l’atelier
L’objectif de cet atelier est de programmer les deux composants du module « admin »
qui sont lister-films et ajouter-film. La première interface affiche une liste de films
(figure1). La deuxième interface permet d’ajouter un nouveau film à la liste (figure 2).
Figure 1. Page « Liste Films »
1
Figure 2. Page « Ajouter Film »
Les deux composants lister-films et ajout-film ont besoin d’avoir accès au tableau
d’objets tabFilms. Ainsi, nous avons deux components : lister-films et ajouter-film qui
accèdent tous les deux à un même élément. Comment résoudre ce problème ?
Avec Angular, ce problème est résolu grâce à la notion de service.
Qu’est-ce qu’un service ?
Un service est un bout de code, une classe, qui peut contenir des données qu’on veut
partager entre plusieurs composants.
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.
Etape 1 : Création du service film
1. On commence par créer un service nommé films, on tape la commande :
ng generate service services/films
2
Ouvrir le contenu du fichier [Link] et vérifier que son contenu est :
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilmsService {
constructor() { }
Modifier le contenu du service FilmsService comme suit :
src/app/services/[Link]
import { Injectable } from '@angular/core';
import { FILMS } from '../shared/models/des-films';
import { Film } from '../shared/models/film';
@Injectable({
providedIn: 'root'
})
export class FilmsService {
films : Film[]=FILMS;
constructor() { }
getFilms () : Film []
{
return [Link];
}
}
C’est le service films qui maintient le tableau des films. Il initialise le tableau par
la constante FILMS et a, pour le moment une méthode :
• getFilms qui permet de retourner le tableau des films et sera utilisée par
le component lister-films
Etape 2 : Programmation du composant lister-films
Changer le code du component liste-films pour prendre en compte l’ajout du service
films comme suit :
3
[Link]
import { Component, OnInit } from '@angular/core';
import { FilmsService } from 'src/app/services/[Link]';
import { Film } from 'src/app/shared/models/film';
@Component({
selector: 'app-lister-films',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ListerFilmsComponent implements OnInit {
tabFilms: Film[] = [];
constructor(private filmsService : FilmsService) { }
ngOnInit(): void {
[Link]=[Link]();
}
}
• L’instruction : constructor(private filmsService : FilmsService) { } dans la
classe ListerFilmsComponent permet d’injecter le service FilmsService dans le
composant lister-films.
• L’initialisation du tableau des films de la classe ListerFilmsComponent va se faire
dans la méthode ngOnInit (cette méthode permet d’initialiser le composant) qui
appelle la fonction getFilms du service filmsService.
2. Implémenter le code du template du composant liste-films pour afficher les noms
des films.
3. Ajouter dans le service films une méthode supprimer qui permet de supprimer un
film donné en paramètre du tableau des films.
4. Ajouter le code nécessaire dans le composant lister-films (.ts et .html) qui affiche
un bouton supprimer pour chaque film. En cliquant sur ce bouton le film en
question sera supprimé de la liste des films (voir figure 3)
4
Figure 3. Suppression du deuxième film
Etape 3 : Programmation de l’ajout d’un film
5. Commencer par injecter le service films dans le composant ajouter-film
6. Modifier le template [Link] par :
<div class="contenu">
<label>Nom du film</label> <input><br>
<label>Description du film</label> <input><br>
<button class="btnInfo">Ajouter</button>
</div>
Le code CSS contenu est :
.btnInfo {
background-color: #008CBA;
border: none;
border-radius: 4px;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 1px;
cursor: pointer;
5
}
.contenu
{
margin : 10px;
}
input {
font-size: 14px;
border-radius: 2px;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #BDBDBD;
}
label {
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
display: block;
text-transform: uppercase;
}
Il reste à programmer le bouton Ajouter. Pour ce faire, il faut récupérer les valeurs des
deux inputs (nom du film et description du film) et une fois qu’on clique sur le bouton
ajouter, il faut ajouter le nouveau film au tableau des films.
7. Pour récupérer les valeurs des deux imputs, nous allons utiliser la référence des
variables dans le template.
Il existe un moyen pour obtenir les données utilisateur grâce aux variables de référence
du template Angular. Ces variables fournissent un accès direct à un élément à partir du
template. Pour déclarer une variable de référence de modèle, précéder un identifiant
par un caractère dièse (ou dièse) (#).
Exemple :
<input #nom>
<p>{{[Link]}}</p>
On modifie le template [Link] par :
<div class="contenu">
<label>Nom du film</label> <input #nom><br>
<label>Description du film</label> <input #desc><br>
6
<button
(click)="ajouterFilm([Link],[Link])">Ajouter</button>
</div>
8. Ajouter dans le service films une méthode ajouterFilm qui permet d’ajouter un film
dans le tableau des films. La méthode ajouterFilm prend en paramètre le nom et la
description du film. Si le tableau est vide, l’id du film sera 1, si non l’id du nouveau
film sera l’id du dernier film incrémenté de 1.
9. Ajouter le code nécessaire dans la classe TypeScript du composant ajouter-films
(.ts) qui implémente la fonction ajouterFilm du template (<button
(click)="ajouterFilm([Link],[Link])">Ajouter</button>). Cette méthode
ajouterFilm va appeler la méthode du service films (voir figure 4)
(a) Remplir le formulaire
7
(b) Apparition d’une alerte après avoir cliqué sur Ajouter
(c) Retour à la liste des films
Figure 4. Ajouter un film