Devoxx 2012 – Angular JS

Avant de commencer de vous parler d’Angular JS, je tiens à préciser que ce fut ma présentation préférée lors de Devoxx 2012.

Angular JS est un framework de développement Javascript côté client opensource. Google est à l’origine de ce framework et de nombreuses personnes contribuent à ce projet.

Lors de la présentation d’Angular JS, la salle était plus que comble. Comme bon nombre de participants, j’ai du m’asseoir sur les marches pendant une heure, mais je ne le regrette pas du tout.

Il faut dire que les speakers, Igor Minar (@IgorMinar) et Miško Hevery (@mhevery) ont fait un show à l’américaine sous forme de “live coding”. Un dialogue rondement mené permettant d’expliquer le fonctionnement d’Angular JS et au final, de voir de nos propres yeux une application qui pourrait fonctionner en production en moins d’une heure.

Les fonctionnalités intéressantes

Two Way Data-Binding

Le data-binding est sans doute la fonctionnalité la plus intéressante d’Angular JS. Ceci nous permet de ne pas écrire une quantité phénoménale de code réutilisable. Dans les applications Web dites “standard”, on peut considérer qu’entre 60 et 80% du code écrit est consacré à la manipulation, la traversée et l’écoute du DOM. Le data-binding permet d’éliminer ce “bruit” et donc de nous concentrer sur notre application.

Dans Angular JS, il faut penser le modèle comme “l’unique source de vérité” de votre application. Vous allez lire votre modèle ou le mettre à jour partout dans votre application. Des directives spécifiques permettent d’exposer simplement et sans effort le modèle dans la vue.

Voici un petit exemple d’utilisation :

 <!doctype html>

    <html ng-app>

    <head>

    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>

    </head>

    <body>

    <div>

    <label>Nom:</label>

    <input type="text" ng-model="monNom" placeholder="Entrez votre nom">

    <hr>

    <h1>Hello, {{monNom}}!</h1>

    </div>

    </body>

    </html> 

Templates

Sous Angular JS, un template est juste un “plain-old-HTML”. Le vocabulaire HTML est juste “étendu”, pour contenir les instructions précisant comment le modèle sera présenté dans la vue.

Il est important de réaliser qu’à aucun moment Angular JS manipule les templates comme des chaînes de caractères. L’entrée d’Angular est l’arbre DOM du navigateur Web et non pas le HTML !

Vous trouverez ci-dessous un exemple de template :

 function ImageCtrl($scope)

{ scope.images = [

{"thumbnail":"img/image_01.png", "description":"Image 01 description"},

{"thumbnail":"img/image_02.png", "description":"Image 02 description"},

{"thumbnail":"img/image_03.png","description":"Image 03 description"},

{"thumbnail":"img/image_04.png", "description":"Image 04 description"},

{"thumbnail":"img/image_05.png", "description":"Image 05 description"} ]; } 

L’utilisation se fait de la façon suivante :

 <div ng-controller="ImageCtrl">

      <ul>

        <li ng-repeat="image in images">

          <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">

        </li>

      </ul>

    </div> 

MVC

Angular JS n’implémente pas le modèle MVC au sens pattern, mais plus MVVM (Model-View-ViewModel).

  • Model : c’est simplement la donnée de l’application. Il s’agit juste de “plain old JavaScript objects”.
  • ViewModel : il s’agit d’un objet qui fournit des données et des méthodes spécifiques pour maintenir des vues spécifiques.
  • Controller : il est chargé d’établir l’état initial et d’améliorer la variable $scope avec des méthodes pour contrôler le comportement. Il faut noter que le contrôleur ne doit pas stocker d’état et ne doit pas interagir avec des services distants.
  • View : c’est le code HTML qui existe après qu’Angular JS ait analysé et compilé le code HTML pour inclure les balises et les bindings.

Dependency Injection

Angular JS apporte son propre système d’injection de dépendance (DI) qui aide le développeur à concevoir une application facile à développer, comprendre, maintenir et tester.

Directives

Les directives peuvent être utilisées pour créer des tags HTML “custom” qui fournissent de nouveaux composants spécialisés. Ils peuvent aussi être utilisés pour “décorder” des éléments avec des comportements afin de manipuler les attributs du DOM.

 myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller:

    function($scope, $attrs, mySharedService)

{ $scope.$on('handleBroadcast', function()

{ $scope.message = 'Directive: ' + mySharedService.message;

    }); }, replace: true, template: '

    <input type="text" />

    ' }; }); 

L’utilisation se fait de la façon suivante :

 <my-component ng-model="message"></my-component> 

Conclusion

La présentation d’Angular JS m’a donné envie de renouer avec le développement Web. Comme vous avez pu le remarquer, ce framework apporte de nombreux concepts très intéressants. A tester d’urgence !! (http://angularjs.org/)

Nombre de vue : 114

COMMENTAIRES 6 commentaires

  1. DEMEY dit :

    Très bonne présentation d’AngularJS. Est-ce qu’il y a eu d’autres présentations concernant ce genre de framework JavaScript (ember, backbone …) au devoxx ?

  2. François Ostyn dit :

    Bonjour Emmanuel,
    merci beaucoup pour ton commentaire.
    Alors à Devoxx 2012, je trouve que l’accent a été mis sur la partie IHM cette année. Il y a eu de nombreuses conférences sur l’utilisation de JavaScript (Testacular pour les tests, Javascript for Java developers,…).
    Mais Devoxx est avant tout une conf Java !

  3. Bonjour,

    Merci pour ce tutoriel qui apporte une information très intéressante sur ce framework qui, à mon avis, devrait percer prochainement, tant il est pratique à utiliser.

    Je souhaitais aussi signaler qu’il manque un $ à la ligne 3 du fichier de la partie “Templates” :


    function ImageCtrl($scope)

    { $scope.images = [
    ...

    pour que la variable “super globale” $scope soit bien prise en compte.

  4. boris dit :

    Bonjour,
    je vous propose de lire ce post b.qr.ae/X8ZYGp afin de relativiser sur cet engouement soudain de la communauté JAVA pour Angular.js. D’autres solutions existent et méritent qu’on s’y interesse.

  5. tsifei chan dit :

    Intéressant comme article, on a beaucoup hésité entre emberjs et angularjs et on a testé angularjs pour faire un générateur de thèmes bootstrap :

    http://pikock.github.com/bootstrap-magic/

    Les principales fonctionnalités, les plus intéressantes sont effectivement énoncés dans votre article.

    Pour maitriser le framework, il faut réellement lire la documentation attentivement pour comprendre les nouveaux concepts qu’AngularJS intégre. (le scope, les directives…)

  6. […] Google, permettant de développer des applications web en HTML, dont nous avions fait une rapide présentation sur le blog, suite au Devoxx […]

AJOUTER UN COMMENTAIRE