L’un des aspects, du développement web, en plus forte progression, est le développement d’applications web côté client. Ce développement d’applications se fait à l’aide de librairies permettant, à différent niveau, d’automatiser et d’abstraire certains concepts liés au concept d’une page web.
Le monde du développement d’applications côté client est assez vaste. L’écosystème est dominé par quelques joueurs offrant des fonctionnalités permettant d’attaquer la mise en place de solutions de ce type de différentes façons.
Il faut aussi savoir que ces librairies se divisent en deux catégories : les librairies et les frameworks. Une librairie va s’intégrer dans votre projet et offrir certaines fonctionnalités. Le framework va proposer une architecture dans laquelle vous pourrez développer votre application.
Les joueurs les plus populaires, dans ce domaine, sont les suivants :
Par Google, pour la communauté
AngularJS est un framework open soutenu par une équipe de développement provenant de Google. Le projet est en place depuis déjà le 2009.
Le principal point de vente de ce projet est de faciliter le développement d’applications fonctionnant sur une seule page (en anglais on dit Single-page Application) en offrant un modèle de développement MVC. Il est aussi digne de mention qu’AngularJS est conçu autour du concept de faciliter la testabilité de votre logique d’affaires.
Sur une note moins sérieuse, j’ai trouvé amusants les noms de code que l’équipe de développement a donnés aux différentes versions d’AngularJS. Dans le lot, il y a des noms comme radioactive-gargle, tofu-animation et debilitating-awesomeness.
Comment ça marche?
Côté développement, AngularJS est directement mise en place à partir de votre HTML afin d’offrir ses fonctionnalités. Cela est possible à l’aide d’un système basé sur des attributs ajoutés à vos éléments de DOM. Ces attributs sont nommés directives et font en sorte que votre HTML sera compilé par la librairie au chargement initial de la page.
Cette fonctionnalité permet au développeur de construire son application en construisant son HTML comme seule référence afin d’en savoir la structure. Cela veut dire que vous n’avez pas besoin de recourir à des gabarits, englobés dans des balises <div>, afin de segmenter les fonctionnalités de votre application.
En plus de cela, vous pouvez ajouter des fonctionnalités à votre application assez facilement. Par exemple, l’ajout de l’attribut ng-click permet d’associer le traitement d’un clic à un élément de votre DOM.
Minimum fonctionnel
Une application, minimalement fonctionnelle, utilisant AngularJS aura les composantes suivantes :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app> | |
| <head> | |
| <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script> | |
| </head> | |
| <body> | |
| <button ng-click="count = count + 1" ng-init="count=0"> | |
| Increment | |
| </button> | |
| count: {{count}} | |
| </body> | |
| </html> |
Sur cet exemple, tiré de la documentation du projet, il est possible de cliquer sur un bouton qui incrémente un compteur affiché sur la page. Les éléments requis sont les suivants :
- Ligne 1 : la directive ng-app.
- Ligne 4 : le référencement de la librairie d’AngularJS.
- Ligne 7 : la directive déclarant l’expression permettant l’incrémentation d’un compteur.
- Ligne 10 : l’affichage du compteur.
Ce qu’il faut savoir, en vrac
Il faut savoir qu’AngularJS est un Framework de développement complet. Il vise à couvrir la totalité de vos besoins de développement côté client.
Ceci étant dit, il serait ambitieux de pouvoir couvrir l’entièreté de ses fonctionnalités sur un simple billet. La documentation développeur est très complète. Je vous invite, de tout mon cœur, à la consulter, car elle va vous donner un très bon aperçu de ce qu’il est possible de faire avec la librairie.
Afin de ne pas répéter ce que vous pouvez trouver ailleurs, je vous fais la liste des concepts importants à retenir pour vous initier. Du moins, ce sont les concepts qui m’ont permis de comprendre! À vous de savoir!
- Utilisation du design pattern MVC dans AngularJS.
- Two-Way Databinding
- Gestion de la navigation avec le service $location
- Formulaires
- Utilisation des expressions
French Coding 
Une réflexion sur “Une introduction à la librairie JavaScript : Angular.js”