Aller au contenu principal

TP 10 : Client HTTP

Objectifs​

  • Configurer une fausse API en utilisant json-server
  • Utiliser le HttpClientModule et créer/utiliser des services associés pour récupérer des données depuis une API

Tâches​

Tâche 1 : Configuration du backend​

Puisque nous allons travailler avec REST, nous voulons avoir une fausse API avec laquelle travailler. Nous utiliserons json-server pour configurer une fausse API. Cela est parfait pour simuler une vraie API et pour travailler avec le HttpClientModule.

  • Installez json-server avec npm
    • npm install -D json-server
  • Créez un fichier db.json à la racine de votre projet avec le contenu que vous pouvez trouver sur :
    • https://bitbucket.org/treelevel/workspace/snippets/97xLMB
    • Modifions notre fichier package.json pour ajouter un nouveau script :
    • "json-server": "json-server --watch db.json"
    • Vous pouvez maintenant exécuter npm run json-server pour démarrer le serveur
    • Vous pouvez accéder aux données sur http://localhost:3000/albums dans votre navigateur
    • Gardez le serveur en marche pendant que vous travaillez sur le laboratoire... Vous pouvez ouvrir un autre terminal pendant que celui-ci fonctionne si vous en avez besoin.

Tâche 2 : Créer le service AlbumService​

  • La première chose à faire est d'importer le HttpClientModule dans le fichier app.module.ts

  • Ensuite, créez un nouveau service appelé AlbumService en utilisant le CLI Angular

  • Le service doit avoir les méthodes suivantes :

    • getAll(): Observable<Album[]>
    • get(id: number): Observable<Album>
    • add(album: Album): Observable<Album>
    • update(album: Album): Observable<Album>
    • delete(id: number): Observable<Album>
    • getRandomAlbum(): Observable<Album>

  • Utilisez une combinaison de pipes pour obtenir un album aléatoire :

    • utilisez GetAll pour obtenir tous les albums
    • puis pipez les données pour obtenir un album aléatoire dans une map

[ASTUCE] Rappelez-vous que l'opérateur map est utilisé pour transformer les données émises par l'observable source. Vous pouvez l'utiliser pour obtenir un album aléatoire de la liste des albums et retourner cet album.

Tâche 3 : Consommer le service​

  • Dans les fichiers album-detail-component.ts, album-of-the-day-component.ts, album-list.ts, remplacez le AlbumStaticService injecté par le service AlbumService
  • Corrigez toutes les erreurs associées dans chaque composant en vous abonnant à l'Observable renvoyé par les méthodes du AlbumService

Tâche 3.1 : Correction de album-of-the-day-component.ts​

  • Les choses ne fonctionneront probablement pas comme prévu, vous devrez résoudre les problèmes concernant le album-of-the-day-component.ts

  • Pour l'année, vous pouvez utiliser le pipe date pour formater la date :

  • Maintenant dans la console, nous avons une erreur :

  • Cela est dû au fait que le albumOfThe-Day n'est pas encore chargé lorsque le composant est rendu.

  • Corrigeons cela en utilisant une directive *ngIf :

Tâche 3.2 : Correction de album-detail.component.ts​

  • Lorsque vous accédez au composant de détails d'album, tout semble fonctionner, mais cliquer sur les boutons next ou previous provoquera une erreur.
  • Cela est dû au fait que nous devons récupérer l'erreur lancée par la méthode get du AlbumService et rediriger vers le HomeComponent si l'album n'existe pas.