Compte Rendu AngularJS

Introduction au Framework

Ce document rend compte des travaux pratiques réalisés sur AngularJS, un framework MVC côté client développé par Google. Comme indiqué dans le cours, AngularJS représente un "grand bond vers le futur de HTML", permettant de créer des applications web modernes à page unique (SPA). L'objectif est d'appréhender la "pensée MVC" (Modèle-Vue-Contrôleur).

Structure des Fichiers

Approche

Une bonne organisation est essentielle pour maintenir la logique applicative séparée de la vue.

Figure 7 : Vue globale du dossier de travail

Figure 8 : Séparation des fichiers HTML (Vue) et JS (Contrôleur)

1. Démo Simple (Expressions & Directives)

Objectifs

Initialiser une application AngularJS et comprendre le système de template via l'interpolation.

Approche & Primitives

Nous utilisons la directive racine ng-app pour définir la portée de l'application. L'affichage repose sur le système de template "handlebars" {{ }}.

Fonctionnement

Angular analyse le DOM à la recherche de directives. Lorsqu'il rencontre une expression mathématique comme {{ 2 + 3 }}, il l'évalue dynamiquement et injecte le résultat dans la Vue.

Figure 1 : Interprétation dynamique des expressions mathématiques

2. Hello World (Pattern MVC)

Objectifs

Mettre en œuvre le pattern MVC (Modèle-Vue-Contrôleur) et le Data-Binding bidirectionnel.

Approche & Primitives

• Modèle : Structure de données (JSON) représentant l'entité.
• Vue : Le code HTML affiché à l'utilisateur.
• Contrôleur : Géré par ng-controller, il agit comme le "messager" entre le serveur/données et la vue.
• $scope : Objet qui sert de canal de communication et encapsule les données.

Fonctionnement

Grâce à la directive ng-model, nous lions le champ de saisie (Vue) à une variable du $scope (Contrôleur). Toute modification de l'input met à jour le modèle en temps réel, ce qui rafraîchit instantanément l'affichage du texte "Hello..." dans le DOM.

Figure 2 : Binding bidirectionnel (Two-way binding)

1. Création de Modules

Objectifs

Structurer l'application proprement en encapsulant la logique dans un Module dédié, évitant ainsi de polluer l'espace global.

Approche & Primitives

Nous utilisons la déclaration de module recommandée par le cours :
var myApp = angular.module('myApp', []);.

Fonctionnement

Le module agit comme un conteneur pour les différents composants de l'application (Contrôleurs, Services, Filtres). La directive ng-app="myApp" lie le HTML à ce module spécifique.

Figure 3 : Instanciation de l'application via un Module

2. Gestion des Événements (Calculatrice)

Objectifs

Manipuler des données via des actions utilisateur (clics) et mettre à jour le modèle.

Approche & Primitives

Utilisation de la directive ng-click pour lier les boutons HTML à des fonctions définies dans le $scope du contrôleur.

Fonctionnement

Le contrôleur contient la logique métier (addition, multiplication). Bien que nous ayons placé cette logique dans le contrôleur pour cet exercice, le cours précise que pour des fonctionnalités complexes et réutilisables (ex: une fonction multiply), il serait préférable d'utiliser un Service.

Le service est un "design pattern" singleton idéal pour partager de la logique.

Figure 4 : Interactivité gérée par ng-click

3. Multi-Contrôleurs & Isolation

Objectifs

Gérer plusieurs instances de contrôleurs sur une même page.

Approche & Primitives

Création de deux contrôleurs distincts : Math1 et Math2.

Fonctionnement

Chaque directive ng-controller crée une nouvelle instance de scope. Le $scope encapsule les données pour qu'elles soient "limitées à l'élément". Ainsi, la variable result du premier contrôleur n'écrase pas celle du second. C'est le principe d'isolation des composants.

Figure 5 : Isolation des scopes via multiples contrôleurs

4. Interaction JS Externe ($apply)

Objectifs

Mettre à jour le scope Angular depuis un événement JavaScript externe (hors du framework).

Approche & Primitives

Utilisation de angular.element().scope() pour récupérer le scope et de la méthode critique $apply().

Fonctionnement

Angular surveille automatiquement les changements qui se produisent dans son propre contexte (via ng-click, ng-model). Cependant, lorsqu'un événement vient de l'extérieur (ex: un bouton standard JS), Angular n'est pas "averti". Il faut utiliser $apply() pour forcer le cycle de digestion (digest cycle) et rafraîchir la Vue.

Figure 6 : Appel externe avec rafraîchissement manuel du Scope

Tendances actuelles (Recherche)

Bien qu'AngularJS (v1) ait posé les bases des frameworks SPA modernes, l'écosystème a évolué :

• Angular (v2+) : Utilise TypeScript et une architecture basée sur les Composants (Component-based) plutôt que le strict MVC et $scope.
• React & Vue.js : Dominent actuellement le marché grâce à leur performance (DOM Virtuel) et leur flexibilité.

Cependant, la logique apprise ici (Data-binding, séparation des responsabilités) reste universelle dans le développement Front-End.

Bibliographie / Webographie

• Support de cours fourni : Cours-AngularJS.pdf (Google)
• Documentation officielle AngularJS : https://angularjs.org/
• Tutoriels et exemples de Todd Motto (cité dans le cours).