TP 6 : Services

Objectifs

• Utiliser un service pour obtenir des données statiques

Instructions

Étape 1 : Créer un service pour obtenir des données statiques

• Tout d’abord, notre classe album doit avoir un identifiant. Ajoutons donc un identifiant à l’interface de l’album.

export interface Album {
  id: number;
  ...
}

• Adaptez vos composants pour que tous les albums disposent d’un ID. Assurez-vous que votre application compile toujours.
• Pour l’instant, nous utiliserons un service pour obtenir des données statiques. Nous allons créer un service qui retournera une liste d’albums.
• Nous devons également être capables de réaliser toutes les opérations CRUD sur les albums.
• Créons donc un service AlbumStatic qui aura les méthodes suivantes :
  • getAll(): retourne tous les albums
  • get(id: number): retourne l’album avec l’ID donné
  • add(album: Album): ajoute un nouvel album
  • update(album: Album): met à jour un album
  • delete(id: number): supprime un album

private albums: Album[] = [/*Contient des albums*/]

getAll(): Album[] {
   return this.albums;
}

update(album: Album) {
  const index = this.albums.findIndex(a => a.id === album.id);
  this.albums[index] = album;
}

// Nous retournons undefined si l'album n'est pas trouvé, cela provient du fait que nous utilisons la méthode find
get(id: number): Album | undefined {
  return this.albums.find(album => album.id === id);
}
// D'autres méthodes...

[ASTUCE] Pour supprimer un élément d’un tableau, vous pouvez utiliser la méthode splice.

Étape 2 : Utiliser le service dans tous les composants concernés

album-list.component.ts:

• Injectez le service
• Remplacez le tableau albums par un tableau vide et appelez le service dans le constructeur pour obtenir les albums.

albumsService = inject(AlbumStaticService)

albums: Album[] = [];

constructor() {
  this.albums = this.albumService.getAll();
}

album-of-the-day.component.ts:

• Ici, nous avons deux approches possibles pour obtenir un album aléatoire :
  • Nous pouvons obtenir tous les albums puis en sélectionner un aléatoire dans le tableau
  • Nous pouvons créer une méthode dans le service qui retournera un album aléatoire
• Utilisons la deuxième approche.
  • Dans le service, créez une méthode appelée getRandomAlbum(): Album qui retournera un album aléatoire.

getRandomAlbum(): Album {
  const index = Math.floor(Math.random() * this.albums.length);
  return this.albums[index];
}

• Nous n’avons alors pas besoin de deux variables dans le fichier album-of-the-day.component.ts, nous pouvons simplement appeler le service pour obtenir l’album aléatoire :
  • Lorsque le composant se charge (utilisez le constructeur)
  • Lorsque l’utilisateur clique sur le bouton pour obtenir un autre album aléatoire

export class AlbumOfTheDayComponent {

  albumService = inject(AlbumStaticService)

  @Output() notifyParentToClose = new EventEmitter<boolean>();

  albumOfTheDay: Album

  constructor() {
    this.changeAlbumOfTheDay()
  }

  changeAlbumOfTheDay() {
    this.albumOfTheDay = this.albumService.getRandomAlbum()
  }

  closeAlbumOfTheDay() {
    this.notifyParentToClose.emit(true);
  }
}