Introduction à AngularJS

AngularJS est un framework Javascript front-end porté par Google, c’est l’un des plus populaire du moment, et il n’a cessé de gagner en engouement depuis sa première release en 2009. A l’instar d’autres technologies comme React, Backbone ou Ember, il sert essentiellement à développer des applications web dites Single page, c’est à dire une application entière accessible via une seule page web générée coté serveur.

AngularJS introduit une toute nouvelle approche pour travailler avec du javascript coté client, c’est un framework qui pousse vers un développement structuré, dans la veine du design pattern MVC (ou MVVM), et qui apporte un aspect applicatif très poussé, au delà de la simple manipulation du DOM.

En effet, la ou plusieurs framework et librairies se limitent à simplifier la manipulation du DOM (JQuery) ou à offrir des composants susceptible de faciliter et de rendre plus rapide le travail du développeur (ExtJS), angular de son côté, va plus loin et redéfinie la façon avec laquelle construire des application front-end, grâce notamment à une panoplie d’outils et de mécanismes très puissants (directives, controller, routing, double data-binding entre autres) qui permettent d’écrire des applications plus riches plus rapidement et surtout plus facile à tester et à maintenir.

Quand utiliser AngularJS ?

Avant de commencer à utiliser angular, il faut d’abord s’assurer que vous en avez vraiment besoin. comme je l’ai dit plus haut, AngularJS est parfait pour développer des application web SPA (Single page application), où beaucoup de chose se passent justement côté client.

Il est en effet axé sur l’extension du DOM et sur un système de data-binding très poussé qui le rend idéal pour la manipulation de données et l’interaction “fluide” avec l’utilisateur, c’est typiquement un framework data-driven

En substance, si vous avez besoin de construire des applications desktop-like type client émail, éditeur de document (à la google Docs) ou client de messagerie, AngularJS est parfait pour vous, si en revanche vous avez besoin de faire de la manipulation de DOM pour embellir un site web (un slider, un effet parallax, scrolling dynamic) passez votre chemin et orientez vous plutôt vers JQuery. Il faut savoir aussi qu’à ce jour, les site web basé sur angular sont encore très mal référencés, c’est en effet dû au fonctionnement des robots d’indexations des moteurs de recherche qui ne sont pas encore “single-page friendly”.

Premiers pas avec AngularJS

Pour illustrer la puissance et la simplicité d’utilisation d’AngularJS nous allons développer une petite appli de gestion de tâche (Todo List).

Tout d’abord, nous devons mettre en place le minimum vital d’un projet Angular. Cela revient, en général, à ajouter une déclaration ng-app, écrire un contrôleur pour parler à la vue puis l’inclusion d’Angular et un attachement au DOM. Voici l’essentiel :

Dans le fichier app.js je crée une application AngularJS, puis je l’attache au dom avec la directive ng-app, je crée aussi un controller que j’appelle appCtrl, je l’attache avec au dom à son tour avec la directive ng-controller, les controllers dans AngularJS permettent de faire le lien entre les services (le model) et le template html (la vue), ils contiennent la logique qui va régir le comportement de ce qui est affiché à l’écran.

Vous remarquerez omniprésence de l’objet $scope dans le controller, en fait l’objet $scope c’est ce qui va permettre de créer le lien entre le template et le controller, par exemple dans appCtrl je vais créer une liste $scope.todoList, je bouclerai dessus dans le template grâce à la directive ng-repeat, à chaque fois que j’ajouterai un élément dans ma liste, angular va le détecter et va automatiquement mettre à jour le template afin d’y ajouter un élément du dom, en l’occurrence un élément <a></a>

N.B: Pour les besoin de ce tuto j’ai opté pour un seul fichier app.js, pour des applications plus complexes il faut séparer les différents fichiers, la structure de dossier d’une application angular est très importante pour sa maintenance.

Et voila ce que ça donne.

See the Pen Introduction a angular.js by Nizar Oukhchi (@kimiBST) on CodePen.