Aller au contenu principal

Lab 16: httpResource

📖 Ressources​

🚀 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.