Créer un service avec Angular CLI (ng generate service)

Un service Angular est une classe TypeScript décorée avec @Injectable(). Cette classe peut être créée avec le CLI ou manuellement.

Créer un service avec le CLI

On peut créer un service Angular avec la commande ng generate service du CLI, ou son raccourci ng g s.

Ainsi, la commande :

ng g s data

crée un fichier data.service.ts qui contient le service DataService suivant :

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // Votre code ici
}

Remarques :

  • Le CLI ajoute automatiquement le suffixe Service au nom de service passé à la commande ng g s, et le suffixe .service.ts au nom du fichier. “data” devient donc “DataService”.
  • La propriété providedIn: root du décorateur permet de dire que le service est accessible globalement.

Pour plus d’infos sur ce point, voir Créer un service avec Angular CLI (ng generate service).

Créer un service manuellement

On pourrait créer le même service manuellement. Il suffit de créer un fichier TypeScript data.service.ts et d’y mettre une classe TypeScript décorée avec @Injectable(), avec le même code qu’on trouve plus haut. (N’oubliez pas d’importer le décorateur @Injectable() de “@angular/core”.)

Les conventions de nommage à respecter sont :

  • Ajouter le suffixe Service au nom de la classe.
  • Ajouter le suffixe .service.ts au nom du fichier.

Dans la classe du service, vous êtes libre de créer les propriétés et les méthodes de votre choix. Tout dépend de ce que fait votre service.

Pour plus d’infos sur ce point, voir Qu’est-ce qu’un service Angular ?.

“Provider” le service

Quand on crée un service avec le CLI, la propriété providedIn: 'root' est automatiquement ajoutée au décorateur @Injectable.

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

}
Cela signifie que le service est *providé* dans le root de l'application est qu'il est accessible globalement. D'autres options sont possibles.