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:
"
[email protected]"},
{id: 2, name: "Ervin Howell", username: "Bret", email:
"
[email protected]"},
{id: 3, name: "Clementine Bauch", username: "Samantha", email:
"
[email protected]"}
]
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
