Introduction
Ce TP approfondit la notion de Templates dans AngularJS. L'objectif est de dépasser le simple affichage de texte pour manipuler des formulaires complexes, afficher des listes de données dynamiques (boucles) et mettre en place un système de filtrage en temps réel.
1. Mise en relation de données (Binding)
Formulaire et Types d'Entrées
Objectifs
Créer un formulaire complet reliant divers types de champs HTML5 (texte, email, select, radio, date, range) à un objet JSON unique dans le modèle Angular.
Approche et Primitives
Nous avons utilisé la directive ng-model sur chaque élément du formulaire pour lier sa valeur à une propriété de l'objet $scope.customer.
input type="date": Lié à customer.birthdate.input type="range": Lié à customer.skilllevel pour créer un curseur de compétence.select&radio: Pour les choix multiples (Pays, Couleur).
Fonctionnement
Grâce au Two-way Data Binding, toute modification dans le formulaire met à jour instantanément l'objet JSON affiché en bas de page. AngularJS gère automatiquement la conversion des types (par exemple, la date est traitée comme un objet Date).
🚀 Voir la démo : simplebinding.html
Figure 1 : Formulaire interactif avec visualisation JSON en temps réel.
2. Répétition de données
Affichage de listes (ng-repeat)
Objectifs
Afficher dynamiquement une liste d'utilisateurs stockée dans un tableau JSON (Array) au sein du contrôleur.
Approche et Primitives
La directive clé ici est ng-repeat="customer in customers". Elle fonctionne comme une boucle foreach en programmation classique.
Fonctionnement
AngularJS clone l'élément HTML sur lequel la directive est placée pour chaque entrée du tableau. À l'intérieur de chaque clone, nous avons accès aux propriétés de l'objet courant ({{customer.name}}, etc.).
Figure 2 : Liste des clients générée dynamiquement.
3. Répétition Imbriquée
Structure Maître-Détail
Objectifs
Gérer des structures de données complexes où chaque élément contient lui-même une liste (Relation One-to-Many : Une commande contient plusieurs produits).
Approche et Primitives
Nous avons imbriqué deux directives ng-repeat :
- La première boucle sur les commandes (
orders). - La seconde, située à l'intérieur de la première, boucle sur les détails de la commande courante (
order.details).
Fonctionnement
Le scope enfant (la boucle des produits) a accès aux données du scope parent, mais itère uniquement sur les détails spécifiques à la commande en cours d'affichage. Cela permet de créer des vues hiérarchiques.
🚀 Voir la démo : nestedrepeat.html
Figure 3 : Affichage hiérarchique (Commandes > Produits).
4. Filtrage des données
Moteur de recherche temps réel
Objectifs
Implémenter une barre de recherche permettant de filtrer instantanément la liste des clients affichée.
Approche et Primitives
AngularJS propose le concept de Filtres (pipes). Nous avons utilisé :
ng-repeat="customer in customers | filter:query".
Fonctionnement
Le champ input est lié à la variable query via ng-model. Le filtre | filter:query dans le ng-repeat compare automatiquement cette chaîne de caractères avec toutes les propriétés des objets de la liste (Nom, Email ou Pays). L'affichage se met à jour à chaque frappe clavier sans aucun code JavaScript supplémentaire.
Figure 4 : Liste complète (Recherche vide).
Figure 5 : Liste filtrée sur "UK".
ng-repeat combinée aux filtres permet de créer des interfaces riches (tableaux de bord, listes de recherche) avec une syntaxe déclarative très concise, là où le JavaScript natif demanderait des boucles et des manipulations de DOM verbeuses.
Bilan et Perspectives
1. Apprentissages personnels
J'ai appris à structurer des vues complexes en manipulant des objets JSON imbriqués. La découverte du filtrage automatique (| filter) est particulièrement marquante par sa simplicité d'implémentation. J'ai aussi renforcé ma compréhension du binding sur des éléments de formulaire spécifiques comme les dates et les curseurs (range).