Démonstration 2 : Service, Observable, réactivité et formulaires

Nous allons maintenant faire évoluer notre application pour adopter une architecture plus robuste et professionnelle. L'objectif est de séparer la gestion des données de l'affichage en introduisant un service. Ce service agira comme une fausse API (une "API en mémoire"), gérant l'état de nos tâches.

Nous allons également créer un formulaire réactif pour ajouter de nouvelles tâches, ce qui nous permettra de voir comment la liste se met à jour en temps réel grâce à la puissance des signaux.

Architecture cible : service et réactivité

Ce diagramme montre comment les composants interagissent avec le service pour lire les données (flux de réactivité) et pour envoyer des actions (flux d'événement).

graph TD
    subgraph "Flux de Données (Réactivité)"
        direction TB
        S(TodoApiService) -- "gère" --> SP["signal privé todos"]
        SP -- "expose" --> SR["signal public todos$.asReadonly()"]
        TLC(TodoListComponent) -- "lit (s'abonne)" --> SR
        TLC -- "affiche les données" --> HTML[Template HTML]
    end

    subgraph "Flux d'Action (Événement)"
        direction LR
        User[Utilisateur] -- "clique" --> HTML
        HTML -- "appelle (click)='toggleTodo(id)'" --> TLC
        TLC -- "délègue l'action" --> S
        S -- "met à jour l'état" --> SP
    end

---

Objectifs pédagogiques

À la fin de cette démonstration, vous saurez :

• Créer un service pour centraliser la logique et l'état des données.
• Utiliser l'injection de dépendances avec inject() pour fournir le service aux composants.
• Exposer un état réactif depuis un service en utilisant un signal public en lecture seule (.asReadonly()).
• Créer un formulaire réactif complet avec FormBuilder et des validateurs.
• Gérer la soumission d'un formulaire, appeler une méthode de service asynchrone (Observable) et gérer la navigation.
• Construire une application entièrement réactive où les changements de données dans le service sont instantanément reflétés dans l'interface utilisateur.

---

Installation

1. Ouvrir le projet sous WebStorm.
2. Ouvrir un terminal dans WebStorm.
3. Lancer la commande npm install pour installer les dépendances.
4. Lancer la commande ng serve pour démarrer le serveur de développement.
5. Ouvrir le navigateur à l'adresse http://localhost:4200/.

---

Flux de soumission du formulaire

L'étape 3 vous demandera de gérer la création d'une tâche. Voici le flux logique de la soumission du formulaire que vous allez implémenter.

graph TD
    A["Utilisateur clique Enregistrer"] --> B(TodoFormComponent.saveTodo)
    B -- "Vérifie" --> C{Formulaire valide ?}
    C -- "Non" --> D[Fin : Affiche erreurs de validation]
    C -- "Oui" --> E[Prépare le payload des données]
    E --> F(Appelle TodoApiService.createTodo)
    F -- "Retourne" --> G["Observable simule délai réseau"]
    B -- "Souscrit à l'Observable" --> G
    G -- "Émet la tâche créée (next)" --> H(Callback .subscribe)
    H -- "Appelle" --> I(Router.navigate vers la liste)
    I --> J[Fin : Redirection effectuée]

Instructions

Le projet est déjà configuré. Votre travail est de compléter le code dans les fichiers indiqués en suivant les // TODO.

Étape 1 : le cerveau de l'application - le service

Ouvrez le fichier app/core/services/todo.service.ts. C'est ici que nous allons centraliser toute la gestion de nos tâches.

1. // TODO 1.1 : Créer la source de vérité.

• Déclarez un signal privé nommé todos pour stocker le tableau de tâches.

2. // TODO 1.2 : Exposer les données de manière sécurisée.

• Déclarez une propriété publique todos$ qui expose le signal todos en lecture seule grâce à la méthode .asReadonly(). C'est ce que les composants utiliseront pour lire les données.

3. // TODO 1.3 : Implémenter la création d'une tâche.

• Dans la méthode createTodo, créez un nouvel objet Todo.
• Utilisez this.todos.update() pour ajouter la nouvelle tâche à la liste.
• Retournez la nouvelle tâche dans un Observable qui simule un délai réseau avec of(...).pipe(delay(...)).

4. // TODO 1.4 : Implémenter les interactions.

• Complétez les méthodes toggleTodo et deleteTodo pour qu'elles mettent à jour le signal privé todos en utilisant .map() (pour basculer) et .filter() (pour supprimer).

Étape 2 : connecter la liste au Service

Ouvrez le fichier app/features/todo/todo-list/todo-list.component.ts. Ce composant ne gérera plus les données lui-même, il va simplement les afficher et déléguer les actions au service.

1. // TODO 2.1 : Injecter le service.

• Utilisez inject(TodoApiService) pour obtenir une instance de votre service.

2. // TODO 2.2 : Se connecter au flux de données.

• Connectez le signal todos du composant directement au signal public todos$ de votre service.

3. // TODO 2.3 : Déléguer les actions.

• Dans les méthodes toggleTodo et deleteTodo du composant, appelez simplement les méthodes correspondantes de votre service.

Étape 3 : créer le formulaire d'ajout

Ouvrez le fichier app/features/todo/todo-form/todo-form.component.ts. Nous allons construire ici le formulaire de création.

1. // TODO 3.1 : Injecter les outils nécessaires.

• Injectez le FormBuilder, le Router et votre TodoApiService.

2. // TODO 3.2 : Construire le formulaire.

• Utilisez this.fb.nonNullable.group({...}) pour définir la structure de votre formulaire avec les champs title et completed et leurs validateurs.

3. // TODO 3.3 : Gérer la soumission.

• Dans la méthode saveTodo, vérifiez si le formulaire est valide.
• Préparez le payload (les données à envoyer) à partir des valeurs du formulaire.
• Appelez la méthode createTodo de votre service. Comme elle retourne un Observable, vous devez y souscrire avec .subscribe({...}).
• Dans le next de la souscription, redirigez l'utilisateur vers la liste des tâches avec this.router.navigate(...).

Étape 4 : activer les interactions dans les templates

Il ne reste plus qu'à connecter les actions dans les fichiers HTML.

1. // TODO 4.1 : Dans todo-list.component.html

• Assurez-vous que les événements (click) sur le <span> et le bouton de suppression appellent bien les méthodes toggleTodo(todo.id) et deleteTodo(todo.id).

2. // TODO 4.2 : Dans todo-form.component.html

• Liez le formGroup à la balise <form>.
• Liez l'événement (ngSubmit) à votre méthode saveTodo().
• Connectez chaque input à son formControlName.

Une fois toutes les étapes terminées, votre application sera entièrement fonctionnelle... et réactive !