Introduction à AngularJS


Technique

AngularJS est un framework JavaScript MVC créé par Google qui ambitionne de faciliter le développement d’applications web riches.
Il possède une bonne gestion de la synchronisation Server, du deep linking et gère la validation des formulaires côté client.
Entre autres, il permet par exemple d’étendre les propriété HTML ou encore d’insérer des attributs “ng-*” directement dans les balises HTML. Il est donc facile de “binder” des éléments via des models ou controllers sans modifier le DOM. Un peu à la façon de l’ActionScript3 avec son framework Flex, bien qu’Angular pousse le concept encore plus loin.
L’avantage est d’avoir une structure propre à l’instar de jQuery et d’éviter d’écrire tout le code sans dessus-dessous de façon procédurale.
Par exemple, vous pouvez utiliser Angular pour vos applications riches, HTML5, ou encore pour celles comportant de nombreuses interactions JavaScript.

Cas pratique

L’un des principaux avantages d’AngularJS est de pouvoir séparer les couches métiers.
Nous allons voir un exemple simple de TodoList impliquant une vue et un controller avec pour objectif de vous familiariser avec cette nouvelle technologie.

Tout d’abord, afin de pouvoir bénéficier d’AngularJS, il fest nécessaire de charger la bibliothèque dans le head du document :
<script src= »https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js »></script>

Il faut également préciser à notre template HTML que nous utilisons AngularJS : tout simplement en rajoutant l’attribut “ng-app” dans la déclaration de la balise <body>

// index.html

Capture d’écran 2013 01 30 à 09.55.05 Introduction à AngularJS

// controller.js

Capture d’écran 2013 01 30 à 09.56.19 Introduction à AngularJS
(Le code source est disponible en Gist)

Conclusion

L’usage d’AngularJS est recommandé lorsque vous avez besoin de développer une application client riche et suffisamment complexe pour qu’il devienne nécessaire de séparer les couches métiers. Son utilisation améliorera la clarté dans votre code : la collaboration sera d’autant plus évidente et entraînera automatiquement une meilleure stabilité du code de manière générale. Mais si votre site ne requiert pas toute cette architecture MVC, ni une utilisation du JavaScript poussée, l’utilisation de jQuery pourra amplement suffire !

 

 

Laisser un commentaire