Ç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.
Ç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
Have fun!