Accéder à la démo en ligne
Exercice 1 : Désactivation de bouton
Gestion d'état booléen
1. Objectifs
L'objectif de cet exercice est de conditionner l'accessibilité d'un élément d'interaction (bouton) à l'état d'un autre élément (case à cocher). Il s'agit de reproduire le comportement classique d'acceptation des "Conditions Générales d'Utilisation" (CGU).
2. Approche et Primitives utilisées
Pour réaliser cette fonctionnalité sans écrire de JavaScript impératif, nous avons utilisé les directives suivantes :
ng-app: Initialisation de l'application.ng-model: Pour créer une liaison de données bidirectionnelle (Two-way binding) sur la CheckBox.ng-disabled: Pour modifier dynamiquement l'attribut HTML standard disabled.
3. Fonctionnement du code
Nous définissons une variable modèle nommée agree sur la balise input type="checkbox".
AngularJS observe cet élément : si la case est cochée, agree vaut true, sinon false.
Sur le bouton de soumission, nous appliquons la directive ng-disabled="!agree".
L'expression est évaluée en temps réel. Si l'utilisateur n'a pas coché la case (!agree est vrai), le bouton est désactivé.
Dès l'interaction, le cycle de digestion d'Angular met à jour le DOM instantanément.
4. Résultats
Figure 1 : Case décochée, le bouton est inactif (gris).
Figure 2 : Case cochée, le bouton devient actif (vert).
Exercice 2 : Validation de Formulaire
Contrôle de saisie et Feedback visuel
1. Objectifs
L'objectif est de créer un formulaire complet (Nom, Email) qui valide les données saisies côté client avant soumission. L'application doit fournir un retour visuel immédiat (couleurs, messages) à l'utilisateur pour améliorer l'UX (User Experience).
2. Approche et Outils
Nous avons structuré l'application selon le pattern MVC :
- Vue (HTML) : Utilisation des attributs HTML5 (
required,type="email") combinés à la directivenovalidatepour laisser Angular gérer la validation. - Contrôleur (JS) : Définition d'une fonction
submitForm()qui vérifie la validité globale. - Style (CSS) : Exploitation des classes d'état injectées par Angular (
.ng-invalid,.ng-dirty).
3. Fonctionnement détaillé
Chaque champ de saisie est lié au scope via ng-model. AngularJS surveille l'état de chaque champ et du formulaire global (nommé form).
Lorsque l'utilisateur interagit avec un champ, Angular lui attribue la classe ng-dirty. Si la règle de validation (ex: format email) n'est pas respectée, la classe ng-invalid est ajoutée.
Notre feuille de style CSS utilise ces sélecteurs pour appliquer une bordure rouge ou verte.
Enfin, la directive ng-submit="submitForm(form.$valid)" permet d'intercepter l'envoi. La méthode du contrôleur reçoit le booléen $valid et déclenche une alerte uniquement si le formulaire est intègre.
Figure 3 : Champs invalides (rouge) et messages d'erreur contextuels.
Figure 4 : Saisie correcte (vert), le formulaire peut être soumis.
addEventListener) et des manipulations manuelles du DOM, AngularJS offre une approche déclarative. Les classes CSS dynamiques et l'objet $error simplifient considérablement la gestion des formulaires complexes.
Bilan et Perspectives
1. Apprentissages personnels
À travers ce TP, j'ai appris à structurer une interaction utilisateur sans rechargement de page. J'ai compris l'importance de séparer la définition de la vue (HTML) de la logique métier (Contrôleur).
J'ai particulièrement retenu l'usage de ng-disabled pour sécuriser les actions utilisateur et l'utilisation des classes d'état (dirty, pristine) pour fournir un feedback visuel pertinent.
3. Bibliographie et Webographie
- Support de cours : TP-AngularJS-3.pdf (Université).
- Documentation officielle (Legacy) : code.angularjs.org.
- Recherches sur les tendances : "State of JS 2024" et documentation officielle Angular.io.