AngularJS

Depuis quelques années, de nombreux framework Javascript ont vu le jour : BackboneJS, EmberJS, KnockoutJS …

Là où AngularJS se démarque des autres, c'est par son approche originale.

Plutôt que de manipuler vous même le DOM dans le Javascript, AngularJS va étendre le HTML et gérer pour vous les manipulations du DOM.

Cette approche permet une séparation claire entre le HTML et le JS.

Voici un exemple simple qui illustre cette manière de faire

Avec la plupart des frameworks, pour afficher une liste d'utilisateurs, on pourrait procéder de la manière suivante :

note : il y a de nombreuses manières de faire, on peut utiliser un moteur de templates comme Mustache, se passer de jQuery … mais là n'est pas l'objet de cette introduction

Dans le HTML

<ul id="users-list"></ul>

Dans le Javascript (en utilisant jQuery)

// liste des utilisateurs
var users = [{id: 1, name: 'first'}, {id:2, name: 'second'}, {id: 3, name: 'third'}],
    _html = '';
 
// itération pour construire la liste
$.each(users, function (i, u) {
    _html += '<li class="user-detail">' + u.name + '</li>';
});
 
// affichage de la liste
$('#users-list').html(_html);

Maintenant avec AngularJS

dans le HTML

<ul ng-controller="usersCtrl">
    <li class="user-detail" ng-repeat="user in users">{{user.name}}</li>
</ul>

dans le Javascript

function usersCtrl ($scope) {
    // on alimente le scope du controller usersCtrl en alimentant la variable users
    // automatiquement AngularJS va modifier le DOM en itérant dans le tableau pour répéter la zone identifiée par 
    // la directive ng-repeat
    $scope.users = [{id: 1, name: 'first'}, {id:2, name: 'second'}, {id: 3, name: 'third'}];
}

Comme vous pouvez le constater, la lecture du HTML est simple et on ne retrouve aucune balise HTML dans notre code javascript.

Alors, prêt à sauter le pas ?

Forums Développement Multimédia

AngularJS