Le TP 2 : Compteur interactif avec Angular

1. Objectifs

   • Réaliser une application Angular complète, en partant d'un projet vide, en réinvestissant toutes les notions vues jusqu'ici
   • Concevoir un modèle TypeScript typé (unions, interfaces, fonctions) et l'utiliser dans plusieurs composants
   • Gérer l'état avec les signals (signal, computed, linkedSignal, effect)
   • Utiliser toutes les liaisons: interpolation, propriété, classe, style, attribut, événement et two-way ([(ngModel)], model())
   • Gérer le clavier et les événements globaux, et faire communiquer des composants avec input() et output()
   • Exploiter les variables de template (#ref, @let, $index) et le contrôle de flux (@if, @for, @switch)
   • Travailler par étapes vérifiables, avec un commit Git à chaque point de contrôle

1. Prérequis

   • Avoir suivi les chapitres : Présentation de TypeScript, Les types de variables, Le typage fort, La syntaxe de base, Les décorateurs, Le data binding, Le property binding, Le two-way data binding, Les signals, La gestion des événements, Les variables de template.
   • Savoir créer un projet avec Angular CLI et le lancer avec ng serve (voir « La syntaxe de base d'Angular »).
   • Ce TP prolonge le TP 5 Flutter : on y retrouve le compteur ASCII et le compteur numérique, avec leurs règles de couleur et leurs limites.

1. Présentation du projet

   • Vous allez développer l'application Compteurs interactifs, composée de quatre zones :
     • Compteur numérique: une valeur entre un minimum et un maximum, modifiée par un pas réglable, en vert si elle est positive et en rouge si elle est négative, avec une jauge, des raccourcis clavier et une fonction d'annulation ;
     • Compteur ASCII: un caractère entre A (65) et z (122), coloré selon sa nature (majuscule, minuscule, symbole), avec son code en hexadécimal et en binaire ;
     • Historique: la liste des dernières actions des deux compteurs, des statistiques, et un enregistrement dans le navigateur ;
     • Mes compteurs du jour: une liste de petits compteurs à objectif (verres d'eau, pauses…), construite à partir d'un composant réutilisable.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, les notions mobilisées, les consignes, une aide, un point de contrôle à vérifier avant de continuer, et des questions.
   • Répondez aux questions dans un fichier README.md, à la racine du projet, au fur et à mesure.
   • À la fin de chaque partie, faites un commit: git commit -m "Partie N : …". L'historique Git sert de preuve de votre progression.
   • Les aides donnent des squelettes de code, jamais la solution complète : c'est à vous de compléter.

1. Partie 0 : mise en place du projet

⏱ 20 min

Notions mobilisées : La syntaxe de base

• Créez le projet, puis lancez le serveur de développement :

npx @angular/cli@latest new tp2-compteur --defaults --ssr=false --style=css
cd tp2-compteur
npx ng serve

• Générez les six composants et créez le dossier du modèle :

npx ng generate component compteur-numerique
npx ng generate component compteur-ascii
npx ng generate component historique
npx ng generate component mes-compteurs
npx ng generate component mini-compteur
mkdir src/app/modeles

• Videz app.html, puis placez-y un titre <h1>Compteurs interactifs</h1> et les balises <app-compteur-numerique />, <app-compteur-ascii />, <app-historique /> et <app-mes-compteurs />. N'oubliez pas le tableau imports de App.
• Dans styles.css, définissez les couleurs de l'application en variables CSS (--bleu, --vert, --rouge, --gris) et une classe .carte-tp (fond blanc, coins arrondis, ombre légère). Dans app.css, disposez les quatre zones sur deux colonnes avec une grille CSS.

src/app/
├── app.ts / app.html / app.css
├── modeles/compteur.ts                 ← partie 1
├── compteur-numerique/                 ← parties 2, 3, 4 et 6
├── compteur-ascii/                     ← partie 5
├── historique/                         ← partie 7
├── mes-compteurs/                      ← partie 8
└── mini-compteur/                      ← partie 8

git add .
git commit -m "Partie 0 : création du projet et des composants"

1. Partie 1 : le modèle TypeScript

⏱ 30 min

Notions mobilisées : Présentation de TypeScript · Les types de variables · Le typage fort

• Toutes les données de l'application sont décrites dans un seul fichier, src/app/modeles/compteur.ts. Il ne contient aucun code Angular : uniquement des types et des fonctions.
  • un type NomCompteur qui n'accepte que 'numerique' ou 'ascii';
  • un type Operation: 'plus', 'moins', 'reinitialiser', 'annuler' ou 'saisie';
  • un type TypeCaractere: 'majuscule', 'minuscule' ou 'autre';
  • une interface Action: id (chaîne, en lecture seule), compteur, operation, avant, apres (nombres) et heure (Date) ;
  • une interface Reglages: pas, min et max;
  • deux constantes exportées ASCII_MIN = 65 et ASCII_MAX = 122;
  • trois fonctions typées : borner(valeur, min, max) qui ramène une valeur dans l'intervalle, typeCaractere(code), et creerAction(compteur, operation, avant, apres) qui renvoie une Action datée avec un identifiant unique (crypto.randomUUID()).

• Aide: complétez ce squelette.

export type NomCompteur = /* à compléter */;
export type Operation = /* à compléter */;
export type TypeCaractere = /* à compléter */;

export interface Action {
  readonly id: string;
  /* à compléter */
}

export function borner(valeur: number, min: number, max: number): number {
  // indice : Math.min et Math.max
}

export function typeCaractere(code: number): TypeCaractere {
  // A–Z : 65 à 90 ; a–z : 97 à 122
}

• Vérifiez vos fonctions avec quelques console.log provisoires dans le constructeur de App:

console.log(borner(15, -10, 10));   // 10
console.log(borner(-3, -10, 10));   // -3
console.log(typeCaractere(77), typeCaractere(100), typeCaractere(91));   // majuscule minuscule autre
console.log(creerAction('numerique', 'plus', 0, 1));   // { id: '…', compteur: 'numerique', …, heure: Date }

git add .
git commit -m "Partie 1 : modèle TypeScript"

1. Partie 2 : le compteur numérique, signals et événements

⏱ 45 min

Notions mobilisées : La syntaxe de base · Le data binding · Les signals · La gestion des événements · Les décorateurs

• Dans CompteurNumerique:
  • déclarez un signal valeur (0) et un signal pas (1) ;
  • affichez la valeur entre deux boutons − 1 et + 1 (le texte des boutons utilise pas()) ; les boutons appellent moins() et plus();
  • ajoutez un bouton Réinitialiser;
  • toutes les modifications passent par une seule méthode privée changer(operation, cible);
  • déclarez une sortie action = output<Action>(): changer() l'émet avec creerAction(…).
• Dans App, déclarez un signal historique (tableau d'Action), écoutez la sortie avec (action)="noter($event)" et affichez dans l'en-tête le nombre d'actions enregistrées.

protected changer(operation: Operation, cible: number): void {
  const avant = this.valeur();
  // 1. modifier le signal   2. émettre l'action
}

git add .
git commit -m "Partie 2 : compteur numérique et historique minimal"

1. Partie 3 : limites, couleurs et jauge

⏱ 40 min

Notions mobilisées : Le property binding · Les signals · La syntaxe de base

• Le compteur reste entre min (−10) et max (10), deux nouveaux signals :
  • dans changer(), utilisez borner(); si la valeur ne change pas, n'émettez aucune action ;
  • créez trois computed: auMin, auMax et position (position de la valeur entre min et max, en pourcentage) ;
  • désactivez − au minimum et + au maximum avec [disabled], ainsi que Réinitialiser quand la valeur vaut 0 ;
  • colorez la valeur avec [class.positif] (vert) et [class.negatif] (rouge) ;
  • dessinez une jauge : une barre grise, un trait vertical à la position du zéro, et un curseur rond placé avec [style.left.%]="position()", qui devient rouge à une limite ;
  • affichez avec @if le message « Limite maximale atteinte (10). » ou « Limite minimale atteinte (−10). » ;
  • pour l'accessibilité, donnez à l'élément de la valeur l'attribut aria-valuenow ([attr.aria-valuenow]), et aux boutons un aria-label.

git add .
git commit -m "Partie 3 : limites, couleurs et jauge"

1. Partie 4 : les réglages en two-way binding

⏱ 45 min

Notions mobilisées : Le two-way data binding · Les signals

• Ajoutez sous le compteur un <fieldset> « Réglages » :
  • une liste Pas (1, 2, 5, 10) liée par [(ngModel)]="pas", avec [ngValue] sur chaque option, générée par un @for;
  • deux champs numériques Min et Max liés par [(ngModel)] aux signals min et max;
  • un computed reglagesValides: le minimum doit être négatif et le maximum positif ; sinon, affichez un message d'erreur.
• Problème : si la valeur vaut 8 et que l'on règle le maximum à 3, la valeur doit redescendre à 3. Transformez valeur en linkedSignal: il se recalcule quand min ou max change, en conservant la valeur précédente, bornée.

protected readonly valeur = linkedSignal<{ min: number; max: number }, number>({
  source: () => ({ min: this.min(), max: this.max() }),
  computation: (limites, precedent) => /* à compléter avec borner() */,
});

git add .
git commit -m "Partie 4 : réglages et linkedSignal"

1. Partie 5 : le compteur ASCII

⏱ 45 min

Notions mobilisées : Les signals · La syntaxe de base · Le property binding · Les variables de template

• Dans CompteurAscii, un signal code (65) et des computed: caractere (String.fromCharCode), type (avec typeCaractere()), voyelle, hexa et binaire (sur 8 chiffres).
  • deux boutons ◀ et ▶ (désactivés aux limites 65 et 122) ; au-delà, un message « Limite atteinte » ;
  • le caractère en grand, coloré avec [class]="type()": bleu pour une majuscule, vert pour une minuscule, orange pour un symbole ; les voyelles sont soulignées ([class.voyelle]) ;
  • une ligne « Code 101 · hexa 0x65 · binaire 01100101 », l'hexadécimal passant par le pipe uppercase;
  • la nature du caractère avec @switch (« Lettre majuscule », « Lettre minuscule », « Symbole (entre Z et a) »), suivie d'un badge « voyelle » ;
  • un champ #saisie d'un caractère : Entrée ((keydown.enter)) ou le bouton Aller appellent chercher(saisie), qui va directement au caractère tapé, vide le champ et lui redonne le focus ; un caractère hors limites affiche un message ;
  • chaque changement émet une Action (compteur: 'ascii') : dans App, écoutez-la comme pour le compteur numérique.

• Variante individuelle (comme dans le TP Flutter) : ajoutez une règle d'affichage de votre choix, par exemple les consonnes en gras, les lettres de votre prénom encadrées, ou une couleur différente pour chaque groupe de symboles. Décrivez-la dans le README.

git add .
git commit -m "Partie 5 : compteur ASCII"

1. Partie 6 : raccourcis clavier et annulation

⏱ 30 min

Notions mobilisées : La gestion des événements · Les signals

• Le compteur numérique se pilote aussi au clavier, sans clic préalable. Dans son décorateur, écoutez '(document:keydown)' avec la propriété host et une méthode clavier(e: KeyboardEvent):

• ignorez les touches tapées dans un champ (INPUT, SELECT, TEXTAREA) : on doit pouvoir saisir « -5 » dans Min sans modifier le compteur ;
• appelez preventDefault() pour les flèches (sinon la page défile) et pour Ctrl + Z ;
• annulation: un signal privé precedentes (tableau des 20 dernières valeurs) est complété par changer(); annuler() revient à la dernière valeur et émet une action 'annuler'; un bouton Annuler (n) indique le nombre d'annulations possibles ;
• dans CompteurAscii, utilisez cette fois les filtres de touches: '(document:keydown.arrowleft)' et '(document:keydown.arrowright)'.

git add .
git commit -m "Partie 6 : clavier et annulation"

1. Partie 7 : l'historique

⏱ 45 min

Notions mobilisées : Les décorateurs · La syntaxe de base · Les signals · Les variables de template

• Le composant Historique reçoit les actions de App: actions = input.required<Action[]>(), et prévient le parent avec vider = output<void>(). Dans App: <app-historique [actions]="historique()" (vider)="historique.set([])" />.
  • computed: recentes (les 8 dernières, de la plus récente à la plus ancienne), numeriques, plusHaute et plusBasse (valeurs extrêmes atteintes) ;
  • cinq statistiques : nombre total d'actions (avec @let total = actions().length;), numériques, ASCII, plus haut, plus bas ;
  • la liste avec @for (a of recentes(); track a.id; let premiere = $first, i = $index): un numéro (total - i), le libellé de l'opération, « avant → après » (des caractères pour l'ASCII), l'heure avec le pipe date: 'HH:mm:ss'; la première ligne est mise en valeur ; @empty affiche « Aucune action pour l'instant » ;
  • sous la liste : « … et N action(s) plus ancienne(s) » s'il y en a plus de 8 ;
  • enregistrement: dans le constructeur de App, un effect enregistre les 50 dernières actions dans localStorage (dans un try … catch) ; au démarrage, historique est initialisé en relisant ces données, et chaque heure est reconvertie en Date.

• Pour afficher les dates en français, ajoutez dans app.config.ts: registerLocaleData(localeFr) et le fournisseur { provide: LOCALE_ID, useValue: 'fr' }.

git add .
git commit -m "Partie 7 : historique et enregistrement"

1. Partie 8 : un composant réutilisable

⏱ 45 min

Notions mobilisées : Les décorateurs · Le two-way data binding · La gestion des événements · Les variables de template

• MiniCompteur est un petit compteur à objectif, conçu pour être réutilisé :
  • entrées : libelle (obligatoire), icone (« • » par défaut), max (10 par défaut, converti avec numberAttribute) ;
  • valeur = model(0): une valeur que le parent fournit et que l'enfant modifie ;
  • sorties : limiteAtteinte (émet le libellé quand la valeur atteint max) et supprimer;
  • affichage : l'icône, le libellé, une barre de progression ([style.width.%]), les boutons − et + (bornés à 0 et max), « 3 / 8 » et un bouton × ; la ligne passe en vert quand l'objectif est atteint.
• MesCompteurs affiche une liste de suivis (signal de tableau { id, libelle, icone, max, valeur }, avec trois suivis de départ) :
  • un @for de <app-mini-compteur>, avec [valeur]="s.valeur" et (valeurChange)="changer(s.id, $event)";
  • dans l'en-tête, le total et l'objectif global (« 14 / 29 ») ; en bas, « N objectif(s) atteint(s) sur M » et le message « Bravo : objectif « … » atteint ! » ;
  • un formulaire d'ajout avec deux variables de référence, #nom et #max: Entrée dans le nom ou le bouton Ajouter appellent ajouter(nom, max), qui vide le champ et lui redonne le focus.

git add .
git commit -m "Partie 8 : composant réutilisable"

1. Partie 9 : variantes et finitions

⏱ 15 min

• Choisissez deux variantes (chaque binôme annonce ses choix au formateur, pour varier les projets) :
  • un champ Pas personnalisé (de 1 à 50) en plus de la liste ;
  • un thème sombre, mémorisé dans localStorage avec un effect;
  • une animation (classe CSS temporaire) à chaque changement de valeur ;
  • un export de l'historique au format CSV, dans une zone de texte à copier ;
  • un objectif modifiable directement dans chaque mini-compteur ;
  • une variante libre, validée par le formateur.
• Relisez votre code : noms explicites, membres protected ou private quand ils ne servent pas au parent, aucun console.log oublié, aucune erreur dans la console.

git add .
git commit -m "Partie 9 : variantes et finitions"

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt Git (GitHub, GitLab…), avec au moins dix commits nommés « Partie N : … ».
   • Le fichier README.md: vos noms, les réponses aux questions de chaque partie, les deux variantes choisies et une capture d'écran de l'application terminée.
   • Le projet doit se lancer avec npm install puis npx ng serve, sans erreur ni avertissement.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Déplacer l'historique dans un service injecté avec inject(): c'est l'objet du chapitre « Les services et l'injection de dépendances ».
   • Remplacer Historique et MesCompteurs par deux pages accessibles depuis un menu : ce sera l'objet du chapitre sur le routage.
   • Écrire un test unitaire pour borner() et typeCaractere() avec npx ng test.

1. Bilan

   • Un modèle TypeScript partagé rend toutes les données explicites et vérifiées.
   • Les signals portent l'état ; computed en déduit tout le reste ; linkedSignal et effect traitent les cas particuliers.
   • Les liaisons relient la classe et la vue : {{ }}, [ ], ( ), [( )].
   • Les composants communiquent par input(), output() et model(), sans se connaître.
   • Les variables de template et le contrôle de flux gardent les templates courts et lisibles.

Un bon compteur n'est pas celui qui compte le plus vite, mais celui dont chaque valeur affichée découle, sans surprise, d'une donnée claire : c'est tout l'esprit d'Angular moderne.