Introduction à Angular.js

AngularJS est un framework open-source1 JavaScript développé par Google. Au même titre que jQuery, MooTools, Prototype ou Dojo, il a pour but de simplifier la syntaxe javascript, et de combler les faiblesses de javascript en lui ajoutant de nouvelles fonctionnalités. Et ainsi faciliter la réalisation d'applications web mono-pages.

AngularJS utilise la bibliothèque open source jQuery. Si jQuery n'est pas présent dans le chemin du script, AngularJS reprend sa propre implémentation de jQuery lite. Si jQuery est présent dans le chemin, AngularJS l'utilise pour manipuler le DOM.

Dans quel cas utiliser angular.js ?

Ce Framework s’approche un peu de l’état d’esprit de Ruby On Rails qui prémâche le travail du développeur et bouscule la manière de développer une application web. Il se distingue par les points suivants :

  • Code plus propre et maintenable : Les bonnes pratiques sont accessibles facilement, il suffit de lire les documentations pour produire du code de qualité.
  • Meilleure testabilité : On se focalise sur les choses qui comptent vraiment, AngularJS s’occupe du bas niveau pour nous.
  • Orienté MVC (Modèle-Vue-Contrôleur) et apporte aux applications web côté client les services traditionnellement apportés côté serveur, comme les contrôleurs de vues. En conséquence, une bonne partie du fardeau supporté par le back-end est supprimée, ce qui conduit à des applications web plus légères.
  • Le « Data binding » ou couplage des données est un des points fort d’AngularJS. Il permet de relier la vue aux modèles de données et de permettre une mise à jour automatique des changements dans les deux sens : des changements de la vue mettent à jour le modèle et inversement. Ainsi les manipulations du DOM deviennent (quasi) transparentes pour le développeur.
  • Les Contrôleurs peuvent être déclarés sur n’importe quel élément du DOM et permettent de s’occuper de la logique de traitement (réception ou envoi de données vers le serveur par exemple, remplissage d’une liste ou d’un tableau…). L’avantage est que ces manipulations sont découplées de la vue et s’effectuent dans des fichiers séparés permettant une meilleure lisibilité entre la logique métier et la vue.
  • Le routage entre différentes vues de l’application est assuré et géré par AngularJS ce qui économise ce travail sur le serveur. Cela permet la réalisation de SPA (Single Page Application) avec plusieurs vues sans harcelé le serveur pour chaque vues.
  • La communication avec le serveur est grandement facilitée par les Services. AngularJS propose directement des méthodes pour le CRUD (Create-Read-Update-Delete) sous forme de requêtes XHR(XMLHttpRequest) pour l’insertion, suppression et modification avec une gestion des exceptions en fonction de la réponse du serveur, le tout de façon asynchrone.
  • Injection de dépendances : AngularJS permet l’injection de services ou d’objets directement dans le contrôleur ou les directives ce qui réduit également la gestion de cet aspect par le programmeur.

Il sera particulièrement adapté dans le cadre d’une conception d’application mono-page en temps réel se rapprochant des solutions client-lourd.

Fonctions de base

Angular dispose de directives spécifiques pour interagir avec la page web. Ces dernières sont toutes préfixées avec « ng-» et placées dans les attributs HTML.

Les plus communes sont les suivantes :

  • ng-app : Point d’entrée d’angular dans la page. Cette directive détermine où la bibliothèque doit intervenir. Ainsi le code html suivant <html ng-app> initialisera Angular dans l’intégralité de la page web.
  • ng-bind : Change le texte d’un element selon la valeur d’une expression. Par exemple le code html suivant “<span ng:bind=”name”></span>” affichera la valeur de la variable “name” à l’intérieur de la balise span. Tous changements apportés à cette variable seront instantanéments répercutés dans le DOM à tous les endroits où elle est utilisée.
  • ng-controller : Spécifie la classe Javascript pour l’action donnée. Les controleurs sont des fonctions javascripts habituellement définis dans des fichiers .js à part.
  • ng-repeat : Boucle sur les éléments d’une collection ou d’un tableau

Il est par exemple possible à partir d’un tableau d’afficher un menu en utilisant la boucle ng-repeat. Définissons un tableau JSON dans notre fichier externe :

 function ItemListCtrl ($scope) {  $scope.items = [  { "description": "café" },  { "description": "chocolat" },  { "description": "farine" },  ]; } 

Spécifions l’emploi du contrôleur correspondant dans l’élément du DOM de notre choix (ici le body) :

 <body ng-controller="ItemListCtrl"> 

Puis utiliser angular pour afficher le menu sous la forme suivante :

 <ul> <li ng-repeat="item in items"> {{ item.description }} </li> </ul> 

L’emploi des doubles accolades permet d’évaluer une expression.Par ailleurs il est possible de déclarer une opération telle que :

 <p>1 + 2 = {{ 1 + 2 }}</p> 

Avec AngularJS, il n'y a plus ni événements ni manipulations du DOM. Si, c'est possible, parce que le mapping est bidirectionnel. La vue n'est pas générée en fonction des données au moment d'afficher la page web, elle est constamment mise à jour par AngularJS pour refléter en permanence l'état des données. Tout ce que le développeur a à faire, c'est modifier les données, et la vue est automatiquement mise à jour. Non seulement il reste beaucoup moins de code JavaScript, puisque tout ce qui concerne la gestion des événements et les manipulations du DOM a disparu, mais en plus on a une parfaite séparation entre le code JavaScript de la couche de présentation et la vue elle-même.

En conclusion

Ce framework est particulièrement efficace dans le cadre d'une application de type webservice échangeant des données au format JSON. Dans cette architecture le serveur est complètement déchargé de la présentation et ne fournit que des services implémentant toute la logique métier. Par ailleurs, le client web écrit avec AngularJs peut facilement fonctionner en mode déconnecté car il n'y a aucune génération de la page côté serveur. L'application gère un stockage local et se synchronise avec les données du serveur lorsque celui-ci est accessible.

De part ces multiples avantages, ce type d'architecture est destiné à prendre le l'ampleur et devenir de plus en plus courant.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.