Aller au contenu principal

13-2 Créer un service ProjetService

On créera un service responsable de faire les appels d'API et retourner les données associées aux projets.

Le guide de style Angular indique de nommer les services avec le nom de l'entité à gérer au singulier. Dans notre cas: ProjetService.

Créer un service​

Pour créer un service, on peut utiliser le CLI d'Angular via la commande suivante:

ng generate service core/services/projet-service
info
  • ng generate génère un certain type de fichier
  • service génère une classe de type Service
  • core/services/projet-service génère une classe ProjetService dans le dossier core/services

Il est une bonne pratique de regrouper les classes d'un même type sous le même dossier, services en l'occurrence.

Cela devrait vous avoir généré le fichier suivant dans le dossier core/services.

src/app/core/services/projet-service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProjetService {
  
}
info

Le décorateur @Injectable rend la classe injectable dans d'autres classes via le système d'injection de dépendances d'Angular.

Créer la méthode obtenirTous()​

Dans la classe du service, ajoutez une méthode asynchrone obtenirTous() qui sera responsable d'obtenir tous les projets et de retourner une Promise (méthode asynchrone) de liste de projets (Promise<Projet[]>).

src/app/core/services/projet-service.ts
export class ProjetService {

  async obtenirTous(): Promise<Projet[]> {
    
  }
}

Reprendre le contenu de la méthode obtenirProjets() de ProjetsIndex​

Notre objectif est de remplacer la fonction obtenirProjets() par un simple appel à la fonction obtenirTous() du service.

Ainsi, copiez le contenu de obtenirProjets() dans obtenirTous().

src/app/core/services/projet-service.ts
export class ProjetService {

  async obtenirTous(): Promise<Projet[]> {
    const url = "/projets";

    let reponse = await api.get<Projet[]>(url);
    return reponse.data;
  }
}