first comit
This commit is contained in:
Johan
137
README.md
Normal file
137
README.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# 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).
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
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 !
|
||||
Reference in New Issue
Block a user