Création de service

Objectifs de ce chapitre

✔️

Créez un service Angular

Découvrez comment créer un service à l'aide de la CLI Angular.

Etat des lieux

Vous avez 2 composants dans votre application : TaskFormComponent et TaskListComponent. Le TaskFormComponent est responsable de la création de nouvelles tâches. Le TaskListComponent est responsable de l’affichage de la liste des tâches.

Créer une nouvelle tâche implique de l’ajouter à la liste des tâches. Mais le TaskFormComponent et le TaskListComponent ne sont pas connectés.

Nous avons besoin d’un tiers pour gérer les éléments et les partager entre les deux composants. C’est là qu’interviennent les services Angular !

Services Angular

Dans Angular, un service est une classe qui peut être utilisée pour partager des données et des fonctionnalités entre différentes parties de votre application. Les services sont utilisés pour encapsuler la logique qui n’est pas directement liée à un composant spécifique. C’est notre situation : les tâches ne sont pas directement liées au TaskFormComponent ou au TaskListComponent mais elles sont bien partagées par les deux composants.

Pour le reste de ce cours, les services Angular seront notre principal outil d’orchestration pour récupérer, créer, mettre à jour et supprimer des tâches.

Le premier objectif sera de stocker la liste pour la rendre accessible depuis les deux composants. Par défaut, les services Angular sont des singletons. Cela signifie qu’il n’y a qu’une seule instance du service dans l’application. Tant que vous ne rafraîchissez pas votre application, le service conservera sa mémoire.

Comme le routage Angular ne rafraîchit pas la page, le service conservera la liste des tâches en mémoire en basculant entre le TaskFormComponent et le TaskListComponent.

Créer un service

Pour créer un service dans Angular, vous pouvez utiliser la CLI Angular. La commande ng generate que vous avez utilisé pour les composants peut également être utilisée pour générer des services.

🎓 Instructions

Exécutez la commande suivante dans un terminal :
Fenêtre de terminal
```
ng generate service task
```
ou
Fenêtre de terminal
```
ng g s task
```
Cette commande créera un nouveau fichier appelé task.service.ts dans le dossier src/app.

Ouvrez le fichier task.service.ts et ajoutez une propriété pour stocker la liste des tâches:

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

import { Task } from './models/task.model';

import { v4 as uuid } from 'uuid';

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

     tasks: Task[] = [
            {
                id: uuid(),
                title: 'Tâche 1',
                description: 'Description de la tâche 1',
                createdAt: new Date()
            },
            {
                id: uuid(),
                title: 'Tâche 2',
                description: 'Description de la tâche 2',
                createdAt: new Date()
            }
        ];
}

Cette liste est exactement celle que nous avons utilisée dans le TaskListComponent pour afficher les tâches.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à créer un service avec Angular CLI. Les services sont utilisés pour partager des données et des fonctionnalités entre différentes parties de votre application. Non seulement ils aident à garder votre code maintenable en respectant le principe DRY (“Don’t Repeat Yourself”), mais ils aident également à garder vos composants propres et concentrés sur leur objectif principal.