Mes premiers pas avec AngularJS
Publié : 2 février 2013 Classé dans : 3615 Ma vie, Feedbacks, Javascript, Mes premiers pas, Non classé | Tags: angularjs, bootstrap, Getting started, HTML5, Javascript, Ruby On Rails, web application 10 Commentaires
Ça fait longtemps que je voulais m’y mettre, j’utilise habituellement Backbone pour les besoins similaires.
C’est l’occasion d’introduire une nouvelle série d’articles sur ce blog : Mes premiers pas.
En parcourant la documentation je me suis rendu compte assez rapidement qu’AngularJS n’a rien à voir avec Backbone, il est beaucoup plus complet et aborde les choses différemment. Mais surtout, AngularJS est magique, on s’approche un peu de l’état d’esprit de Ruby On Rails qui pré-mâche le travail du développeur et bouscule la manière de développer une application web.
Pour moi cela signifie 2 choses :
- Code plus propre et maintenable : Les bonnes pratiques sont accessibles facilement, il suffit de lire les documentations pour produire du code de qualité.
- Meilleure testabilité : On se focalise sur les choses qui comptent vraiment, AngularJS s’occupe du bas niveau pour nous.
Concrètement, comment ça fonctionne ?
Je vous conseille de visionner cette vidéo qui introduit AngularJS via un exemple vraiment très simple :
Petit résumé de la vidéo :
On peut demander à AngularJS d’être actif sur une portion de code via l’attribut ng-app à placer sur la balise de notre choix, si on veut qu’il soit actif sur la page entière, il faut simplement le mettre sur la balise <html> :
<html ng-app>
On voit également qu’on peut définir un modèle directement dans le HTML via l’attribut ng-model :
<input type="text" ng-model="yourName" placeholder="Enter a name here">
A chaque fois qu’une touche sera pressée dans ce champ, le modèle sera mis à jour avec sa valeur.
Grâce au data-binding, on peut se brancher à un modèle dans le HTML. Il suffit d’utiliser les doubles accolades : {{ }} et y ajouter le nom du modèle.
Pour l’exemple de la vidéo :
<h1>Hello {{ yourName }}!</h1>
Le HTML de ce bout de code est automatiquement recompilé par AngularJS à chaque fois que le modèle yourName est mis à jour. Ce qui explique pourquoi avec 0 ligne de javascript, lorsque l’on met à jour le champ texte, sa valeur est automatiquement reportée dans le HTML.
Allons un peu plus loin :
Tout d’abord, je vous invite à regarder cette seconde vidéo de 10 minutes pour mieux comprendre la suite.
Pour tester je vais créer une mini application web étape par étape : un moteur de recherche de répertoires GitHub.
J’ai créé une page HTML simple avec Twitter Bootstrap initialisée avec ng-app comme on l’a vu plus haut.
Ensuite dans un nouveau fichier repos.js, j’ai créé un controller GitHubReposController :
// Création du controller
function GitHubReposController($scope, $http) {
// Initialisation du tableau répertoires
$scope.repos = [];
// On va chercher dans l'API github pour peupler le tableau
$http.get('https://api.github.com/legacy/repos/search/onegameamonth')
.success(function(data) {
$scope.repos = data.repositories;
});
}
Maintenant il faut lier le controller au HTML avec l’attribut ng-controller :
<div ng-controller="GitHubReposController">
<h1>GitHub Repos</h1>
<li ng-repeat="repo in repos">
{{repo.name}}
</li>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="repos.js"></script>
Comme on a bindé la liste des répertoires (repos) sur le scope ($scope.repos), on peut y accéder directement dans la vue.
L’attribut ng-repeat permet de boucler sur un tableau. Dans notre cas ça voudrait dire :
for(var repo in repos) {
// Affichage
}
Essayez la démo (source), vous verrez la liste des répertoires GitHub contenant le mot clé onegameamonth.
J’ai voulu aller un peu plus loin en permettant de chercher n’importe quel mot clé et ordonner les résultats.
Pour ça, il faut modifier le controller :
// Création du controller
function GitHubReposController($scope, $http) {
// Initialisation du tableau répertoires
$scope.repos = [];
$scope.keyword = "onegameamonth";
$scope.search = function() {
// On va chercher dans l'API github pour peupler le tableau
$http.get('https://api.github.com/legacy/repos/search/'+$scope.keyword)
.success(function(data) {
$scope.repos = data.repositories;
});
};
$scope.search();
$scope.sort = 'name';
}
- J’assigne un mot clé ($scope.keyword) par défaut lorsque l’on charge la page.
- Je mets le get dans une fonction search qui sera appelée par un formulaire.
- J’assigne un tri ($scope.sort) par nom par défaut.
Ensuite il reste à modifier la vue :
<div ng-controller="GitHubReposController">
<h1>GitHub Repos Search Engine</h1>
<form ng-submit="search()">
<input type="text" ng-model="keyword" size="30" placeholder="search">
<input type="submit" value="Search">
</form>
<h2>{{repos.length}} results.</h2>
<p>
Sort by
<a href="" ng-click="sort = 'size'; reverse=!reverse">Size</a> |
<a href="" ng-click="sort = 'forks'; reverse=!reverse">Forks</a> |
<a href="" ng-click="sort = 'name'; reverse=!reverse">Name</a> |
<a href="" ng-click="sort = 'owner'; reverse=!reverse">Owner</a> |
<a href="" ng-click="sort = 'created_at'; reverse=!reverse">Creation Date</a>
</p>
<li ng-repeat="repo in repos | orderBy:sort:reverse">
<div><a href="https://github.com/{{repo.owner}}/{{repo.name}}">{{repo.name}}</a>, <i>{{repo.description}}</i></div>
<div>Created by <a href="https://github.com/{{repo.owner}}">{{repo.owner}}</a> at {{repo.created_at | date:'fullDate'}}</div>
<div>Size: {{repo.size}} - Forks: {{repo.forks}} - Followers: {{repo.followers}} - Watchers: {{repo.watchers}}</div>
</li>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="repos.js"></script>
- J’ai créé un formulaire en y ajoutant l’attribut ng-submit avec la valeur search(), ce qui aura pour effet d’appeler la fonction $scope.search() dans mon controller à chaque envoi du formulaire.
- J’affiche le nombre de résultats en comptant les occurrences du tableau repos : {{repos.length}}
- J’ajoute des liens pour ordonner les résultats avec en attribut ng-click
- dans l’attribut ng-click j’assigne une nouvelle valeur à sort, ce qui aura pour effet de modifier l’ordre d’affichage.
- Je rajoute l’ordre d’affichage dans le np-repeat grâce au filtre orderBy.
Maintenant, nous avons un vrai moteur de recherche, voici une petite démo (source).
Conclusion
Personnellement, je trouve que cette façon de concevoir une application web est très élégante et plus simple que les autres voies habituelles. Dès que j’en aurai l’occasion j’utiliserai AngularJS pour pousser son utilisation un peu plus loin afin de témoigner de son vrai potentiel et de ses faiblesses. Je vous ferai certainement part de mes retours d’expérience à ce moment-là.
En attendant j’ai récolté quelques ressources pour approfondir mes connaissances que j’aimerais partager avec vous :
- Site Officiel
- Youtube (Screencasts et confs)
- Communauté Google+
- Blog AngularJS français
- AngularJS UI Bootstrap
- Rails gem : angular-rails
- Ruby gem : angularjs_scaffold
- Stackoverflow
- Tutos AngularJS + Rails
- Egghead.io
- RailsCast #405 : Intégrer AngularJS dans une application Rails
Have fun!
Hugeen 
« AngularJS est magique » . Assez d’accord avec ça, c’est l’impression que j’ai aussi en l’utilisant depuis peu. A voir maintenant comment toute cette machinerie fonctionne pour mettre en place de bonnes pratiques, mais sur le coté documentation et com ils ne sont pas trop mal..
J’ai fait les mêmes constats que ceux que tu décris dans ton article. Etant développeur Rails, j’ai beaucoup apprécié l’approche d’Angular et la façon dont on bind dans les vues HTML. Concernant l’effet « magie », je pense c’est qu’on attend d’un bon framework MVC, c’est à dire se concentrer sur la couche métier, et laisser le bas niveau au framework.
Personnellement j’ai fais le choix d’Angular pour le développement d’une petite application iOS / Android en PhoneGap, j’en suis plus que satisfait.
J’ajouterais cette ressource là http://egghead.io/
Sinon bon article, j’attends de voir la suite, étant moi même en train de l’étudier.
Merci pour cette ressource, je l’ai ajoutée à l’article.
J’ajoute également ce RailsCast sur l’intégration d’AngularJS dans Rails : http://railscasts.com/episodes/405-angularjs
[…] de code AngularJS, histoire de voir à quoi cela ressemble vous pouvez aller voir ce lien : https://hugeen.wordpress.com/2013/02/02/mes-premiers-pas-avec-angularjs/ Un autre tuto sur le sujet : http://briantford.com/blog/huuuuuge-angular-apps.html Site officiel […]
Bonjour,
quel est votre excellent éditeur de texte utilisé dans l’exemple vidéo ?
merci pour votre réponse.
La vidéo n’est pas de moi, mais je connais l’éditeur, c’est le fameux WebStorm : http://www.jetbrains.com/webstorm/ je ne l’ai jamais utilisé personnellement mais j’ai entendu quelques bons retours à son sujet.
[…] y a quelques temps, j’ai publié un article sur "Mes premiers pas avec AngularJS", à ce moment c’était de la simple curiosité. Depuis j’ai eu l’occasion […]
Merci beaucoup pour cette introduction, je vais contribuer moi aussi, en mettant mon premier article et mes premiers pas avec AngularJS http://www.cartel-belli.com/angularjs-introduction-et-premier-tutoriel/