diff --git a/README.md b/README.md index c8306e8..e455fa6 100644 --- a/README.md +++ b/README.md @@ -57,3 +57,16 @@ Angular CLI does not come with an end-to-end testing framework by default. You c ## Additional Resources For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. + +## Séquence 2 – Logique réactive du flux de données +### 1. Structure du flux +- Le service `TaskService` utilise un **BehaviorSubject** pour stocker et diffuser la liste des tâches. +- Le composant `Home` s’abonne à ce flux via `tasks$` et le **pipe async**. +### 2. Mise à jour des données +- La méthode `addTask()` ajoute une tâche puis appelle `next()` pour émettre la nouvelle liste. +- La méthode `removeTask()` supprime une tâche puis émet à nouveau la liste mise à jour. +- La vue est automatiquement réactualisée sans rechargement. +### 3. Points clés retenus +- Pas besoin d’appeler `getTasks()` à chaque fois : la donnée est **vivante**. +- `| async` gère l’abonnement et le désabonnement automatiquement. +- Le flux reste cohérent entre le service et la vue. \ No newline at end of file diff --git a/src/app/component/home/home.component.html b/src/app/component/home/home.component.html index e5fd49b..f5ae9c5 100644 --- a/src/app/component/home/home.component.html +++ b/src/app/component/home/home.component.html @@ -1,4 +1,4 @@ -

home works!

+

Home works!

Task List

@if (tasks$ | async; as tasks) { @@ -13,4 +13,7 @@

Loading tasks...

} -

Temps écoulé : {{ count / 2 }} secondes

\ No newline at end of file +

Elapsed time: {{ elapsedClock }}

+ + + \ No newline at end of file diff --git a/src/app/component/home/home.component.ts b/src/app/component/home/home.component.ts index 11e7843..84c2a96 100644 --- a/src/app/component/home/home.component.ts +++ b/src/app/component/home/home.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CommonModule, AsyncPipe } from '@angular/common'; import { TaskService } from '../../service/task.service'; @@ -12,16 +12,16 @@ import { TaskService } from '../../service/task.service'; export class HomeComponent { protected count = 0; private intervalId: any; + public elapsedClock: string = ''; - tasks$!: ReturnType; - - constructor(private taskService: TaskService) { - this.tasks$ = this.taskService.getTasks(); - } + private taskService = inject(TaskService); + tasks$ = this.taskService.tasks$; ngOnInit() { + this.updateElapsedClock(); this.intervalId = setInterval(() => { this.count++; + this.updateElapsedClock(); }, 500); } @@ -31,4 +31,15 @@ export class HomeComponent { } } -} + private updateElapsedClock() { + const totalSeconds = Math.floor(this.count / 2); + const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0'); + const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0'); + const s = String(totalSeconds % 60).padStart(2, '0'); + this.elapsedClock = `${h}:${m}:${s}`; + } + + addTask(title: string) { + this.taskService.addTask(title); + } +} \ No newline at end of file diff --git a/src/app/service/task.service.ts b/src/app/service/task.service.ts index d8e06b8..f92ff99 100644 --- a/src/app/service/task.service.ts +++ b/src/app/service/task.service.ts @@ -1,14 +1,28 @@ import { Injectable } from '@angular/core'; -import { of } from 'rxjs'; +import { BehaviorSubject, of } from 'rxjs'; import { delay } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class TaskService { - private tasks = [{id: 1 , title: 'Sample Task'}, {id: 2, title: 'Another Task'}, {id: 3, title: 'More Tasks'}]; + private tasks = [ + { id: 1, title: 'Sample Task' }, + { id: 2, title: 'Another Task' }, + { id: 3, title: 'More Tasks' } + ]; + private nextId = this.tasks.length > 0 ? Math.max(...this.tasks.map(t => t.id)) + 1 : 1; getTasks() { return of(this.tasks).pipe(delay(1000)); } + + private tasksSubject = new BehaviorSubject(this.tasks); + tasks$ = this.tasksSubject.asObservable(); + + addTask(title: string) { + const newTask = { id: this.nextId++, title: title.trim() }; + this.tasks.push(newTask); + this.tasksSubject.next([...this.tasks]); + } }