Création d’un service

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

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

• task.service.ts — le fichier du service ;

• 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 de celui-ci 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 accomplisse :

• 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 la structure d'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'accomplissement. Vous n'avez pas encore utilisé d'interfaces, mais en ajouter une ici rend le code plus facile à comprendre et à 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 en utilisant la syntaxe de propagation ([...]), ce qui aide à protéger les données originales contre les modifications accidentelles.

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 trouve 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.