Exercice 1 : Services internes à AngularJS (Service $log)
Exploitation des services natifs
Objectifs
L'objectif de cet exercice est d'appréhender l'utilisation des services natifs fournis par AngularJS, plus particulièrement le service $log. Il s'agit de comprendre comment remplacer les instructions classiques JavaScript (comme console.log()) par un outil intégré au framework, mieux adapté au débogage et à la mise en production.
Approche de réalisation
Nous avons utilisé le principe d'injection de dépendances pour passer l'objet $log à notre contrôleur LogController. Côté vue (HTML), nous avons utilisé la directive d'événement ng-click sur cinq boutons distincts. Chaque bouton appelle une méthode spécifique du service natif : log(), warn(), info(), debug() et error(). Ces méthodes prennent en paramètre la variable message, qui est liée à l'input de l'utilisateur grâce au data-binding bidirectionnel (ng-model).
Fonctionnement et Analyse des résultats
Figure 1 : Interface utilisateur de test du service $log.
Figure 2 : Affichage des différents niveaux d'alerte dans la console.
Commentaire du résultat : Le fonctionnement repose sur la réactivité d'Angular. Le texte saisi par l'utilisateur met à jour en temps réel la propriété dans le $scope. Au clic, le service intercepte cette chaîne de caractères et formate son rendu dans la console développeur du navigateur (F12).
Comme observé sur la Figure 2, chaque méthode applique un style visuel distinct : par exemple, le texte est en rouge avec une icône de croix pour error(), et sur fond jaune avec un triangle pour warn(). L'avantage technique de ce service est sa capacité à être intercepté ou désactivé globalement via le $logProvider lors du déploiement en production, garantissant ainsi la sécurité et les performances.
Exercice 2 : Création de services personnalisés
Isoler la logique métier (Business Logic)
Objectifs
L'objectif est d'apprendre à concevoir un service sur-mesure (Custom Service) pour effectuer des tâches spécifiques (ici, des calculs de surfaces : carré et cercle). Le but est de séparer la logique mathématique complexe de la logique d'affichage du contrôleur.
Approche de réalisation
Nous avons utilisé la primitive myApp.service() pour déclarer et instancier un composant nommé AreaService. Ce service encapsule deux méthodes : square(a) et circle(r).
Ce service est ensuite injecté en tant que dépendance dans MyController. Les données saisies transitent via le $scope et sont envoyées au service pour traitement lors du déclenchement des événements ng-click.
Fonctionnement et Analyse des résultats
Figure 3 : Interface de l'application utilisant le service personnalisé de calcul.
Explication : Le contrôleur est ici allégé au maximum : il ne fait aucun calcul mathématique. Il se contente de lier la vue aux données et de déléguer le travail de calcul au service AreaService. Une fois le résultat retourné par le service, le contrôleur met à jour la variable $scope.result, ce qui rafraîchit immédiatement le DOM.
Exemple d'application illustrant l'utilité d'un service de ce type :
L'immense utilité d'un service personnalisé réside dans sa réutilisabilité (Design Pattern Singleton : une seule instance partagée). Dans une application E-commerce professionnelle, on créerait par exemple un CartService (Service de Gestion de Panier). Ce service contiendrait la logique pour ajouter un article, vérifier le stock et calculer le montant TTC. Ce service unique serait injecté à la fois dans le contrôleur de la page "Catalogue" (pour les boutons "Ajouter") et dans le contrôleur du "Menu Header" (pour afficher le prix total actualisé en haut à droite), garantissant une synchronisation parfaite des données à travers toute l'application sans jamais dupliquer de code.
Bilan & Perspectives
1. Synthèse de mes apprentissages
La réalisation de ce travail pratique sur AngularJS m'a permis d'assimiler concrètement l'architecture MVC (Modèle-Vue-Contrôleur) côté client. À travers ces exercices, j'ai appris à :
- Implémenter le Data-Binding bidirectionnel pour synchroniser automatiquement le DOM et le modèle JavaScript.
- Structurer le code de manière modulaire en encapsulant la logique métier dans des Services instanciés via l'injection de dépendances.
- Améliorer la maintenabilité du code et alléger les contrôleurs conformément aux bonnes pratiques de développement logiciel.
2. Tendances actuelles en développement Front-End
D'après mes recherches personnelles (State of JS, enquêtes StackOverflow), bien qu'AngularJS ait révolutionné le web en popularisant le concept de Single Page Application (SPA), l'écosystème a aujourd'hui évolué vers des architectures orientées Composants (Component-Based) :
- Angular (v2 et +) : Google a totalement réécrit le framework en utilisant TypeScript. La notion globale de
$scopea disparu pour laisser place à une hiérarchie stricte de composants. Ce framework reste un standard très prisé dans les environnements d'entreprise (Enterprise-grade apps). - React (Meta) & Vue.js : Ces librairies dominent le marché actuel. Elles reposent sur la notion de Virtual DOM qui offre des performances d'affichage nettement supérieures lors de la mise à jour des vues.
Toutefois, la philosophie architecturale apprise lors de ce TP (séparation des couches, injection de dépendances, pattern MVC) demeure la fondation universelle indispensable pour comprendre et maîtriser n'importe lequel de ces nouveaux outils modernes.
3. Bibliographie & Webographie
- Supports de cours de l'Université : Cours-AngularJS.pdf, Avantages-AngularJS.pdf, TP-AngularJS-5.pdf
- Documentation officielle AngularJS (Legacy) : docs.angularjs.org
- State of JS 2024 : Statistiques mondiales sur l'utilisation et l'évolution des frameworks Front-End.
- Tutoriels d'architecture logicielle : Concepts de "Separation of Concerns" et du pattern "Singleton" en JavaScript.