Aller au contenu
Angular Tutorials

Récupérez la liste des tâches

Objectifs de ce chapitre

  • ✔️
    Récupérez la liste des tâches
    Récupérez la liste des tâches du faux serveur API.

Mettez à jour TaskService

Le service HttpClient expose plusieurs fonctions qui vous permettent de réaliser des requêtes HTTP à un serveur. Dans ce chapitre, vous utiliserez la méthode get pour récupérer la liste des tâches depuis le serveur API.

Cette fonction prend le chemin de la route du serveur API comme paramètre : http://localhost:3000/tasks. C’est l’URL qu’il interrogera pour obtenir la liste des tâches.

getTasks() {
  return this.http.get<Task[]>('http://localhost:3000/tasks');
}

Cette nouvelle méthode getTasks définit la communication avec le serveur API :

  • Il fait une requête GET;
  • Il attend un tableau d’objets Task en réponse;
  • Il communique avec le serveur API à l’URL http://localhost:3000/tasks.

🎓 Instructions

  1. Mettez à jour le fichier src/app/task.service.ts.

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Task } from './task.model';
    

    @Injectable({
        providedIn: 'root'
    })
    export class TaskService {
    

        tasks: Task[] = [
            {
                id: '1',
                title: 'Première tâche',
                description: 'Voici la première tâche de ta to-do liste.'
            },
            {
                id: '2',
                title: 'Seconde tâche',
                description: 'Voici la seconde tâche de ta to-do liste.'
            }
        ];
    

        constructor(private http: HttpClient) { }
    

        getTasks() {
            return this.http.get<Task[]>('http://localhost:3000/tasks');
        }
    }

Mettez à jour TaskListComponent

Réalisez la mise à jour de TaskListComponent pour qu’il utilise la nouvelle méthode getTasks et renommez la variable tasks en tasks$. Ajouter $ permet de signaler qu’il s’agit d’une Observable.

tasks$ = this.taskService.getTasks();

Pourquoi ? Qu’est-ce qu’une observable ?

tasks était un tableau d’objets Task. Désormais, tasks$ est une observable d’un tableau d’objets Task.

En appelant la fonction getTasks, on obtient une Observable qui émettra la liste des tâches une fois reçue du serveur API. Pour différencier une valeur de l’observable, la communauté Angular utilise couramment le suffixe $ dans les applications Angular.

🎓 Instructions

  1. Mettez à jour le fichier src/app/task-list/task-list.component.ts.

    import { Component } from '@angular/core';
    import { TaskService } from '../task.service';
    import { Task } from '../task.model';
    

    @Component({
        selector: 'app-task-list',
        templateUrl: './task-list.component.html',
        styleUrls: ['./task-list.component.css']
    })
    export class TaskListComponent {
    

        tasks: Task[] = this.taskService.tasks;
    

        tasks$ = this.taskService.getTasks();
    

        constructor(private taskService: TaskService) { }
    }

Abonnement

L’appel de la fonction getTasks ne déclenchera pas la requête API immédiatement. Comme elle ne se déclenche pas encore, l’observable n’émettra aucune valeur. Déclenchez ce que nous appelons un abonnement à l’observable pour lancer la requête.

Comment s’abonner ?

Il existe plusieurs façons de s’abonner à une observable. Pour la situation donnée, utilisez le pipe async dans le Template HTML.

Comme le pipe date utilisé précédemment, le rôle du pipe async est de transformer les données avant de les afficher. Ici son rôle sera de s’abonner à l’observable et de renvoyer la liste des tâches une fois disponible.

🎓 Instructions

  1. Modifiez le fichier src/app/task-list/task-list.component.html.

    <tr *ngFor="let task of tasks$ | async">
    <td>{{ task.title }}</td>
    <td>{{ task.createdAt | date }}</td>
    <td>
        <a class="btn btn-primary" [routerLink]="['/update', task.id]">Mettre à jour</a>
    <button class="btn btn-danger" type="button" (click)="deleteTask(task.id)">Supprimer</button>
        </td>
    </tr>

Alternative

L’alternative à l’utilisation du pipe async consiste à s’abonner à l’observable dans le composant.

Cela se fait en appelant la fonction subscribe sur l’observable et en passant une fonction comme paramètre de rappel. Ce rappel sera fait une fois que les données seront disponibles.

Cet abonnement sera utilisé dans la fonction ngOnInit de la classe TaskListComponent.

🎓 Instructions

  1. Modifiez le fichier src/app/task-list/task-list.component.ts.

    import { Component, OnInit } from '@angular/core';
    import { TaskService } from '../task.service';
    import { Task } from '../task.model';
    

    @Component({
        selector: 'app-task-list',
        templateUrl: './task-list.component.html',
        styleUrls: ['./task-list.component.css']
    })
    export class TaskListComponent implements OnInit {
        tasks: Task[] = this.taskService.tasks;
    

        constructor(private taskService: TaskService) { }
    

        ngOnInit() {
            this.taskService.getTasks().subscribe(tasks => this.tasks = tasks);
        }
    }

Pièges

Bien que l’abonnement à l’observable dans le composant soit une solution valable, il manque certaines optimisations fournies par le pipe async. Cela nécessite également plus de code pour le même résultat.

Effectivement, dans le cas où vous utilisez la souscription à l’observable dans le composant, vous devez penser à vous désabonner. Nous ne verrons pas cette action pour le moment. Vous pouvez échanger avec votre mentor pour plus de détails.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris l’une des fonctionnalités clés d’Angular : comment interroger les données d’un serveur API !