Angular JS : le framework Javascript par Google

AngularJS

Aujourd’hui, Geeko vous propose de découvrir Angular JS, le framework créé par des employés de Google pour créer (entre autres mais surtout) des web apps !

Angular : MVC et HTML étendu

Tout d’abord, qu’est-ce qu’Angular JS ? C’est un framework MVC (Model – View – Controller) pensé pour créer des applications CRUD (Create – Read – Update – Delete) tout en retirant l’interaction entre DOM et Javascript. Pourquoi ? Ceux qui utilisent régulièrement jQuery ou d’autres librairies savent que ce n’est pas toujours facile de « viser » correctement un élément pour le modifier. Et une fois modifié, il faut souvent faire des allers-retours entre le serveur, le HTML et le Javascript servant d’interface … Bref, toute une histoire se transformant rapidement en galère quand les modifications sont lourdes ! Les développeurs d’Angular l’ont pensé pour qu’il fonctionne sur un modèle différent : plutôt que de modifier les éléments du DOM directement en les pointant avec des id/classes à rallonge, ils ont décidés de transformer le HTML, de l’augmenter : au lieu d’utiliser du PHP ou du Ruby pour faire du templating, on utilisera directement le HTML en utilisant l’attribut « data » des tags.

Angular possède des directives permettant une manipulation immédiate du DOM. Un petit exemple :

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

Ce petit bout de code permettra de créer une liste d’objet et d’afficher leur description … Plutôt simple non ? :) Grâce à la directive ng-repeat du framework, on va répéter le nœud dans lequel on se trouve. La partie {{item.description}} permet tout simplement d’aller chercher la valeur de l’attribut description de l’objet item. Cet objet peut tout à fait être conservé dans une collection et on entrevoit déjà une base NoSQL pour enregistrer les données …

En plus de cela, Angular permet un data-binding birectionnel. Cela signifie qu’en passant par le Model, des informations sont envoyées sur la View mais aussi inversement : si des modifications sont faites dans la View, le Model peut en être averti et agir en conséquence. Par exemple :

<ul>
    <li ng-repeat="item in items">
        {{item.description}}
        Edit description : <input type="text" data-ng-model="item.description">
    </li>
</ul>

Pour chaque <li>, on aura un petit champ permettant de changer la description de l’objet.

Bien sûr, on a également un Controller permettant de dire à l’app ce qu’elle doit faire pour chaque action de l’utilisateur et le Model qui se charge de chercher les données là où elles se trouvent. Et s’il s’agit d’aller chercher un JSON, ce n’est pas un problème, car Angular dispose d’un service permettant de faire de l’AJAX facilement : $http. Le fonctionnement est similaire à celui de jQuery :

$http.get('items/list.json').success(function (data) {
    $scope.items = data;
}

$scope est le service permettant de stocker les données du Model dans un objet pouvant être réutiliser dans la View. Ici, on lui dit de chercher le bon JSON et de l’inclure dans le service $scope, et le tour est joué. $scope permet aussi de stocker des fonctions qui seront ensuite réutilisables dans la View.

En bref, Angular JS est un framework bien sympathique pour créer des applications web. Vous avez prévu de l’utiliser pour une prochaine application ? Ou préférez-vous utiliser d’autres frameworks (Knockout, Ember, Backbone …) ?

Sources : le site officiel d’AngularJS, l’article sur le blog de Stéphane Bégaudeau, Webdesigner depot