Lab 16: httpResource

📖 Ressources

• Documentation de l’API Resource
• Guide httpResource

🚀 Code de départ

step-15-album-wholesale-v21-post-signal-computed

Continuez depuis le résultat du Lab 15. Si vous avez besoin d’une copie fraîche, utilisez step-15-album-wholesale-v21-post-signal-computed comme base et complétez d’abord le Lab 15.

Dans ce lab, vous allez simplifier la récupération de données en utilisant la nouvelle API httpResource. Vous créerez des ressources HTTP déclaratives qui gèrent automatiquement les états de chargement et d’erreur, élimineront la gestion manuelle des abonnements et implémenterez des déclencheurs de rafraîchissement avec des signaux.

📝 Instructions

Étape 1 : Créer httpResource dans AlbumService

httpResource s’importe depuis @angular/common/http (pas @angular/core). Il prend une fonction qui retourne une URL ou un objet de requête :

import { httpResource } from '@angular/common/http';
import { Injectable, signal } from '@angular/core';
import { Album } from '../model/album.model';

@Injectable({ providedIn: 'root' })
export class AlbumService {
  private refreshTrigger = signal(0);

  // Ressource déclarative — se recharge à chaque changement de refreshTrigger
  albums = httpResource<Album[]>(() => ({
    url: 'http://localhost:3000/albums',
    params: { _t: this.refreshTrigger() }
  }));

  refresh() {
    this.refreshTrigger.update(v => v + 1);
  }
}

Étape 2 : Utiliser la ressource dans un composant

export class AlbumListComponent {
  private albumService = inject(AlbumService);
  albumsResource = this.albumService.albums;
}

Template :

@if (albumsResource.isLoading()) {
  <p>Chargement...</p>
}

@if (albumsResource.error()) {
  <p>Erreur lors du chargement des albums</p>
}

@if (albumsResource.value(); as albums) {
  @for (album of albums; track album.id) {
    <app-album-card [album]="album"></app-album-card>
  }
}

Étape 3 : Déclencher un rafraîchissement

Ajoutez un bouton pour recharger les données sans navigation :

<button mat-button (click)="albumService.refresh()">Rafraîchir</button>

Le signal refreshTrigger provoque un nouveau chargement automatique de httpResource.

Étape 4 : Supprimer les abonnements manuels

Remplacez les patterns this.http.get(...).subscribe(...) ou toSignal(this.albumService.findAll()) par la ressource. Celle-ci gère son propre cycle de vie — pas besoin de unsubscribe.