Exercice 1 : Récupération de données ($http get)
Exploitation du service asynchrone en lecture
Objectifs
L'objectif de cet exercice est d'apprendre à faire communiquer notre application front-end AngularJS avec un backend distant. Il s'agit de récupérer des données structurées en JSON depuis le serveur pour les afficher dynamiquement dans l'interface, sans provoquer de rechargement de la page.
Approche de réalisation
Nous avons exploité le service natif $http et sa méthode .get(). L'architecture repose sur l'injection de cette dépendance dans un service personnalisé DataService. Côté vue, nous utilisons la directive ng-repeat pour itérer sur le tableau d'utilisateurs récupéré, et la directive ng-class pour appliquer un style conditionnel (alternance de couleurs) selon la position de l'élément ($even et $odd).
Fonctionnement explicite et Analyse
Figure 1 : Interface initiale (tableau vide, données non chargées).
Figure 2 : Tableau peuplé asynchroniquement après l'appel réseau.
Au lancement de l'application, la variable $scope.users est nulle, ce qui explique le tableau vide (Figure 1). Lorsque l'utilisateur clique sur le bouton "Get Data", la fonction du contrôleur déclenche la méthode du service.
Une requête HTTP asynchrone part vers le serveur (fichier sample.json). Le script n'est pas bloqué grâce à l'utilisation d'une Promesse (.then()).
Dès que le serveur répond avec un statut de succès, le callback est exécuté et les données (response.data) sont assignées au scope. Le cycle de digestion (digest cycle) d'AngularJS détecte cette modification et met instantanément le DOM à jour (Figure 2).
Exercice 2 : Envoi de données ($http post)
Communication et transmission de Payload
Objectifs
Ce second exercice vise à transmettre des données saisies par l'utilisateur vers le serveur distant. Il s'agit de simuler l'enregistrement ou la mise à jour d'une ressource en base de données (étape cruciale pour la validation de formulaires).
Approche de réalisation
Nous utilisons la méthode $http.post(). Les données du formulaire HTML sont capturées en temps réel grâce au data-binding bidirectionnel (ng-model) et stockées dans l'objet $scope.customer. Lors de l'envoi, nous précisons dans les Headers de la requête que le format de communication est du JSON (Content-type: application/json).
Fonctionnement explicite et Analyse
Figure 3 : Soumission du formulaire et affichage du statut retourné par le serveur.
L'utilisateur remplit les différents champs du formulaire (Nom, Email, Pays). Lors du clic sur le bouton de soumission, le contrôleur intercepte l'événement. AngularJS se charge de sérialiser (convertir) automatiquement l'objet JavaScript $scope.customer en une chaîne JSON.
Ce JSON constitue le corps (payload) de la requête HTTP POST envoyée au serveur. Le serveur traite la demande et renvoie une réponse (ici simulée par la lecture du fichier post.json). Cette réponse, une fois interceptée par le block .then() de notre promesse, est stockée dans $scope.result et affichée à l'écran pour confirmer le succès de l'opération à l'utilisateur (Figure 3).
$http (GET et POST), nous avons pu séparer complètement le traitement de l'interface (Front-End) de la gestion des données (Back-End). Cette architecture est la base des SPA (Single Page Applications) qui consomment des API RESTful fluides et réactives.
Bilan & Perspectives
1. Synthèse de mes apprentissages (Bilan global)
La réalisation de l'ensemble de ces travaux pratiques sur AngularJS m'a permis d'assimiler concrètement l'architecture MVC (Modèle-Vue-Contrôleur) côté client. J'ai notamment appris à :
- Implémenter le Data-Binding bidirectionnel pour synchroniser le DOM et le modèle de données de manière déclarative.
- Structurer une application via des Modules et des Contrôleurs pour isoler les différents contextes d'exécution.
- Encapsuler la logique métier et les algorithmes dans des Services (natifs et personnalisés) afin de rendre le code maintenable et réutilisable (Design Pattern Singleton).
- Gérer l'asynchronisme et la communication réseau via des requêtes HTTP (Promesses) pour construire de véritables SPA.
2. Tendances actuelles en développement Front-End
D'après mes recherches personnelles (documentation officielle, sondages développeurs comme le State of JS), bien qu'AngularJS ait été pionnier dans la démocratisation des SPA, les technologies web ont fortement évolué vers des architectures orientées Composants :
- Angular (v2 et versions supérieures) : Google a totalement repensé le framework en s'appuyant sur TypeScript. La notion de
$scopea été remplacée par une arborescence stricte de composants isolés, offrant plus de rigueur pour les projets d'envergure. - React (Meta/Facebook) & Vue.js : Ces outils dominent le marché actuel. Ils tirent leur popularité de l'utilisation du Virtual DOM, qui permet de calculer les changements en mémoire et de ne mettre à jour que les portions d'écran nécessaires, offrant ainsi des performances optimales.
Néanmoins, la philosophie et la rigueur d'architecture (séparation des couches, injection de dépendances) apprises sur AngularJS restent des fondations indispensables pour appréhender n'importe lequel de ces nouveaux outils.
3. Bibliographie & Webographie
- Supports de cours de l'Université : Cours-AngularJS.pdf, Avantages-AngularJS.pdf, TP-AngularJS-6.pdf
- Documentation officielle AngularJS : docs.angularjs.org
- Ressources sur les promesses et requêtes asynchrones : MDN Web Docs (Mozilla).
- Recherches sur les tendances : State of JS 2024 et blog d'ingénierie front-end.