Année Universitaire : 2019-2020

Application côté client

Atelier n°7 :
Les services dans Angular

Objectifs :
 Créer un service
 Injecter un service dans un composant
 Manipuler le service HttpClient

Exercice1 :
1- Créer un composant appelé TodoListComponent
2- Créez un modèle de données appelé todo commoe suit :
export class todo{
userId:number;
id:number;
title:string;
completed:boolean;
}

3- Définissez au niveau de ce composant une propriété listTodo :todo[] que vous lui
affectez la valeur suivante au niveau de la méthode ngOnInit()
this.todolist=[
{"userId": 1, "id": 1, "title": "delectus aut autem", "completed":
false},
{"userId": 1, "id": 2, "title": "quis ut nam facilis et officia
qui", "completed": false},
{"userId": 1, "id": 3, "title": "fugiat veniam minus", "completed":
false},
{"userId": 1, "id": 4, "title": "quo adipisci enim quam ut ab",
"completed": true}];

4- Affichez la liste des todo

5- Créez un service appelé calculService
6- Créez une méthode dans le service crée appelée dont la signature est la suivante :
getNumberOf(list:any[], critiria:string, value:any){}
7- Ajoutez le code nécessaire à cette méthode pour qu’elle retourne le nombre des
éléments de list où critiria égal à value
8- Au niveau du composant TodoListComponent, appelez la méthode getNumberOf()
pour retourner le nombre de todo completed dans listTodo . (completed==true)
9- Ajoutez un bouton appelé Bilan, en cliquant dessus un message contenant le nombre
de todo completed par rapport au nombre de todo total est affiché.

1
 10- Créer un composant appelé UsersComponent
11- Créez un modèle de données appelé Utilisateur comme suit :
export class Utilisateur{
id:number;
name:string;
username:string;
email:string
}

12- Définissez au niveau de ce composant une propriété listUsers:Utilisateur[] que

vous lui affectez la valeur suivante au niveau de la méthode ngOnInit()
this.listUsers=[
{id: 1, name: "Leanne Graham", username: "Bret", email:
"Sincere@april.biz"},
{id: 2, name: "Ervin Howell", username: "Bret", email:
"Shanna@melissa.tv"},
{id: 3, name: "Clementine Bauch", username: "Samantha", email:
"Nathan@yesenia.net"}
]

13- Affichez la liste des utilisateurs

14- Au niveau du composant UsersComponent, au dessus de la liste des utilisateurs,
ajoutez une zone de saisie et un bouton « vérifier »
15- En cliquant sur le bouton vérifier, un message contenant le nombre d’utilisateurs ayant
le « username » tapé dans la zone de saisie est affiché. Utilisez la méthode
getNumberOf() du service calculService

Exercice 2 :
1- Créez un service appelé TodoService

2- Définissez une méthode appelé getTodos() au niveau de TodoService. Cette méthode

utilise la méthode get() du service HttpClient pour récupérer et retourner la liste des
todo depuis l’url « https://jsonplaceholder.typicode.com/todos
3- Au niveau du composant TodoListComponent, récupérer le contenu de la propriété
listTodo à partir de la méthode getTodos() du service TodoService.

4- Faire la même chose pour récupérer la liste des utilisateurs à partir de l’url
https://jsonplaceholder.typicode.com/users
Créez pour ceci un service UserService et une méthode getUsers()
5- Ajouter un lien devant chaque utilisateur appelé « voir todo ». En cliquant sur ce lien
les informations de l’utilisateur du todo en question sont affichées.
RQ : vous pouvez récupérez les informations d’un utilisateur dont l’id = 1 en utilisant
l’api : https://jsonplaceholder.typicode.com/todos?userId=1