Année Universitaire : 2024-
2025
Initiation Application côté
client
Workshop n°4 :
Les services dans
Angular
Objectifs :
•Créer un service
•Injecter un service dans un composant
•Manipuler le service HttpClient
Partie 1: Manipulation des services
Nous souhaitons créer une méthode qui permet d’effecturer une recherche dans une liste selon un
critère spécifique :
1- Créer un service commonService sous le répertoire Core/Services
2- Créer la méthode GetSameValueOf dans le service crée, dont la signature est la suivante :
getSameValueOf(list:any[], critiria:string, value:any){}
Cette méthode doit retourner le nombre des éléments de list où critiria égal à value
3- Au niveau du composant ResidencesComponent, appeler la méthode getSameValueOf() pour
retourner les adresses similaires dans listResidences.
4- Au niveau du composant ApartmentsComponent, appeler la méthode getSameValueOf() pour
retourner la liste des appartements qui ont la même surface
Partie 2 : Manipulation du service HTTPClient
A- Installation du json server
1- Installer json-server en tapant la commande : npm i -g json-server
2- Créer un fichier DB.json sous la racine du projet. Alimenter le fichier par la liste des résidences et
la liste des appartements qu’on a définis dans les anciens workshops.
3- Au niveau du terminal du projet courant, taper la commande : json-server --watch DB.json
B- CRUD de l’entité Residence
1- Créer le service ResidenceService sous le répertoire Core/Services et injectez dedans le service
HttpClient
2- Définir dans ce service une propriété appelé residenceUrl selon le lien généré par json-server
residenceUrl ='http://localhost:3000/residences'
3- Créez la méthode qui permet de retourner la liste des residences à partir de l’url mentionnée dans
residenceUrl.
4- Injectez le service «ResidenceService» au niveau du composant ResidencesComponent et récupérer
le contenu de la propriété listResidences depuis ce service. L’affichage est normalement fait grâce aux
anciens workshops
RQ : si l’erreur suivante survient, veuillez voir le workshop Annexe « Configuration de proxy » pour
résoudre ce problème.
5- Créez la méthode deleteResidence() au niveau du service ResidenceService.
6- Devant chaque Résidence affichée, ajouter un bouton « supprimer ». En cliquant dessus la résidence
correspondante est supprimée. Consultez le fichier DB.json pour vérifier la bonne suppression.
7- Au niveau du service ResidenceService, Créez la méthode addResidence() permettant d’ajouter une
nouvelle résidence
8- Ajouter une nouvelle résidence à partir du composant addResidenceComponent puis fait appel à la
méthode addresidence() créée dans le service ResidenceService. Une redirection se fait vers la liste des
résidences une fois l’ajout est terminé.
9- Au niveau du composant ResidenceDetails, vous avez un bouton « Update Résidence » devant chaque
résidence. En cliquant sur ce bouton, le composant addResidence affiche les informations de la
résidence sélectionnée. La valeur de l’id est envoyée dans l’url et le champ id doit être inactif dans le
formulaire.
• Au niveau du composant contenant le formulaire de modification
ngOnInit(){
this.id = this.actR.snapshot.params['id'];
this.service.getResidenceById(this.id).subscribe((data) => {
this.residence = data;
this.residenceForm.patchValue(this.residence);
});
17- Ajoutez la méthode updateResidence() au niveau du service ResidenceService
18- En cliquant sur le bouton « save » du formulaire, les informations de la résidence en question sont mises
à jour sauf l’id bien sûr grâce à la méthode updateResidence () .
Travail Asynchrone :
Effectuer les changements nécessaires pour que la suppression d’une résidence soit suivie de la suppression des
appartements qui lui appartiennent.
