#15: 🔋 Créer un service

Dans Angular, un service est une classe JavaScript qui est responsable d'effectuer une tâche spécifique nécessaire à votre application. Dans notre application todo-list, nous allons créer un service qui sera responsable de l'enregistrement et de la gestion de toutes les tâches, et nous l'utiliserons en l'injectant dans les composants.

Créer un service avec Angular CLI:

ng g s services/todo-list

s est le raccourci de... vous l'avez deviné - service. Cette commande va générer le service TodoListService dans le fichier src/app/services/todo-list.service.ts. Il a le décorateur @Injectable qui lui permet d'utiliser l'injection de dépendance.

src/app/services/todo-list.service.ts

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

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

  constructor() { }
}

Partager des données

Maintenant nous pouvons déplacer le tableau todoList du composant list-manager vers notre nouveau service. Allez dans le fichier src/app/services/todo-list.service.ts, et ajoutez ce code à l'intérieur de la classe TodoListService juste au-dessus du constructor :

src/app/services/todo-list.service.ts

private todoList: TodoItem[] = [
  {title: 'install NodeJS'},
  {title: 'install Angular CLI'},
  {title: 'create new app'},
  {title: 'serve app'},
  {title: 'develop app'},
  {title: 'deploy app'},
];

Assurez-vous que l'interface TodoItem est bien importée :

src/app/services/todo-list.service.ts

import { TodoItem } from '../interfaces/todo-item';

Créer une méthode pour retourner la liste

Nous allons ajouter une méthode getTodoList qui va retourner le tableau todoList. Le service ressemblera à ceci:

src/app/services/todo-list.service.ts

import { Injectable } from '@angular/core';
import { TodoItem } from '../interfaces/todo-item';

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

  private todoList: TodoItem[] = [
    {title: 'install NodeJS'},
    {title: 'install Angular CLI'},
    {title: 'create new app'},
    {title: 'serve app'},
    {title: 'develop app'},
    {title: 'deploy app'},
  ];

  constructor() { }

  getTodoList(): TodoItem[] {
    return this.todoList;
  }
}

Injecter et utiliser le service

Après avoir créé le service, nous pouvons l'injecter dans notre composant list-manager. Dans Angular, l'injection de dépendance est très simple. Nous le passons en paramètre dans le constructeur - le type de paramètre est le nom de la classe du service. Angular attribue l'instance qu'il a créée au nom du paramètre, et nous pouvons l'utiliser à partir du constructeur. Avant de l'implémenter nous-mêmes, voyons comment cela fonctionne. Voici le constructeur de la classe ListManagerComponent:

src/app/list-manager/list-manager.component.ts

constructor(todoListService: TodoListService) {
  todoListService.getTodoList();
}

Typescript nous aide en nous donnant un raccourci pour assigner le paramètre à un membre de classe. En ajoutant private ou public avant le nom du paramètre, il est automatiquement assigné à this. Donc au lieu de déclarer et d'assigner la propriété par nous-mêmes :

export class ListManagerComponent {
  todoListService: TodoListService;

  constructor(todoListService: TodoListService) { 
    this.todoListService = todoListService;
  }
}

... nous pouvons réduire beaucoup de code comme ceci:

export class ListManagerComponent {

  constructor(private todoListService: TodoListService) { }
}

Utilisons le service dans le composant list-manager.

• Supprimez la liste codée en dur du composant, ne gardez que la déclaration de la propriété todoList avec son type.

• Injectez le TodoListService par le constructeur.

src/app/list-manager/list-manager.component.ts

export class ListManagerComponent {
  todoList: TodoItem[];

  constructor(private todoListService: TodoListService) { }

• Assurez-vous que le TodoListService est bien importé.

src/app/list-manager/list-manager.component.ts

import { TodoListService } from '../services/todo-list.service';

• Récupérez la liste du service dans le constructor et l'assigner à notre propriété.

src/app/list-manager/list-manager.component.ts

constructor(private todoListService: TodoListService) {
  this.todoList = this.todoListService.getTodoList();
}

Vous n'avez pas besoin de changer quoi que ce soit dans le modèle puisque nous assignons la liste à la même propriété que nous avons utilisée auparavant. Il semble que rien n'ait changé, mais vous pouvez vérifier que la liste provient du service en la changeant à partir de là (ajout d'un élément, changement de titre, etc.).

Si la liste n'est pas affichée et qu'aucune erreur ne se produit lors de la compilation, le projet pourrait ne pas être synchronisé avec l'ajout du fichier de service. Arrêtez l'exécution de ng serve dans le terminal en cliquant sur Ctrl+C et exécutez-le à nouveau.

💾 Pusher votre code sur GitHub

Committez tous vos changements en exécutant cette commande dans votre répertoire de projet.

git add -A && git commit -m "votre message de commit"

Pusher vos changements sur GitHub en exécutant cette commande dans votre répertoire de projet.

git push