Aller au contenu principal

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);
  }
}