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 :
<html ng-app>
<head>
<script src="https://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/code></pre>
<h3>Templates</h3>
<p style="text-align: justify;">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.</p>
<p style="text-align: justify;">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 !</p>
<p style="text-align: justify;">Vous trouverez ci-dessous un exemple de template :</p>
<pre><code lang="javascript"> 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 :
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div/code></pre>
<h3>MVC</h3>
<p style="text-align: justify;">Angular JS n'implémente pas le modèle MVC au sens pattern, mais plus MVVM (Model-View-ViewModel).</p>
<ul>
<li><strong> Model : </strong> c'est simplement la donnée de l'application. Il s'agit juste de "plain old JavaScript objects".</li>
<li><strong> ViewModel : </strong> il s'agit d'un objet qui fournit des données et des méthodes spécifiques pour maintenir des vues spécifiques.</li>
<li><strong> Controller :</strong> 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.</li>
<li><strong> View : </strong>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.</li>
</ul>
<h3>Dependency Injection</h3>
<p style="text-align: justify;">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.</p>
<h3>Directives</h3>
<p style="text-align: justify;">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.</p>
<pre><code lang="javascript"> 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 :
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 !! (https://angularjs.org/)