Avant de générer un service, il est nécessaire de créer un dossier dédié. Exécutez la commande suivante :

Cela créera un dossier services à l'intérieur de src/app et vous y placera immédiatement, afin que vous puissiez commencer à travailler avec vos services sans attendre.

Création d’un service

Angular propose une commande CLI pratique pour générer rapidement un service, qui configure les fichiers nécessaires ainsi que les imports :

Après l'exécution de cette commande, Angular crée deux fichiers :

• task.service.ts — le fichier de service principal ;

• task.service.spec.ts — un fichier de test (vous pouvez le supprimer).

Voici le contenu initial de task.service.ts :

Le décorateur @Injectable indique à Angular que ce service peut être injecté dans d'autres classes.

La partie providedIn: 'root' signifie qu'Angular enregistrera automatiquement le service dans le module racine et créera une seule instance pour l'ensemble de l'application.

Le composant A, le composant B ou tout autre composant — tous recevront la même instance du service. Cela est très pratique car vous pouvez stocker des données partagées (comme une liste de tâches) et éviter de dupliquer la logique.

C'est pourquoi un service devient la source unique de vérité pour une partie spécifique de la logique ou des données de votre application. Si vous êtes curieux, vous pouvez en apprendre davantage sur le patron singleton dans cet article.

Ajout de la logique au service

Passons à la construction de la logique pour votre service. Voici ce que vous souhaitez qu'il fasse :

• Stocker une liste de tâches ;

• Retourner la liste des tâches ;

• Supprimer des tâches ;

• Basculer le statut d'accomplissement des tâches.

Commençons par définir à quoi ressemble une tâche en créant une interface TypeScript :

Cette interface permet de définir clairement la structure d'une tâche — elle inclut un id, un titre et un statut d'achèvement. Vous n'avez pas encore utilisé d'interfaces, mais en ajouter une ici rend le code plus compréhensible et plus facile à manipuler.

Construisons maintenant le service qui gère votre liste de tâches :

Dans cet exemple, les données des tâches sont stockées directement dans le code à l'intérieur d'un tableau privé tasks.

Pour permettre à d'autres parties de l'application d'accéder à la liste des tâches, la méthode getTasks() est utilisée. Elle retourne une copie du tableau à l'aide de la syntaxe spread ([...]), ce qui permet de protéger les données originales contre toute modification accidentelle.

La méthode deleteTask(id: number) supprime une tâche en filtrant celle dont l'identifiant correspond, mettant ainsi à jour la liste.

Une autre méthode importante est toggleTaskStatus(id: number). Elle recherche la tâche par son identifiant et inverse son statut d'achèvement — si la tâche était marquée comme terminée (true), elle devient incomplète (false), et inversement.

Ce service constitue désormais la base permettant à vos composants d'interagir avec la liste des tâches — sans dupliquer la logique.