Démonstration d'Angular.js

Ceci est un petit démonstrateur des fonctionnalités de la bibliothèque Angular.js...

Idée de base

Angular.js permet d'implémenter le schéma de conception MVC, pour Modèle/ Vue/ Contrôleur. La vue est présentée par le fureteur, le modèle dépend des données, et le contrôleur est une source de données que JavaScript est en mesure de consommer (typiquement, du JSON). L'idée derrière Angular.js est de simplifier fortement le développement d'applications Web (surtout les applications monopages) et l'accès au DOM.

L'une des beautés d'Angular.js est qu'il s'agit d'une solution purement implémentée en JavaScript. L'approche Angular.js se veut d'un peu plus haut niveau que celle de jQuery, ce qui explique que bien qu'il soit possible d'utiliser ces deux bibliothèques conjointement (la page que vous examinez suit cette approche, car l'outil de coloration de code source que j'utilise est typiquement appelé par jQuery), il soit plus fréquent que l'un utilise soit l'une, soit l'autre.

Utiliser Angular.js – étapes clés

Tout d'abord, téléchargez localement une copie à jour de la bibliothèque : http://angularjs.org/

Idéalement, vous aurez pris la version « minifiée » de la bibliothèque, plus compacte et plus à propos pour fins de développement de sites réels. Placez-la dans votre répertoire de scripts.

Le préfixe « ng » est présent parce qu'il « sonne » comme « angle », et le nom Angular (tout comme « ng ») a été choisi parce qu'on trouve, en HTML, beaucoup de chevrons, en anglais Angle Brackets. Voir la foire aux questions pour plus de détails

Dans la page Web que vous développerez à l'aide d'Angular.js :

Ajoutez un lien vers ce script, comme vous le feriez avec n'importe quel script JavaScript
Il vous faudra aussi un lien vers un script décrivant votre contrôleur. Je supposerai ici que le fichier se nomme controleur.js et que son contenu va comme suit :

function TrucsChouettesCtrl ($scope) {
   $scope.trucs = [
     { "description": "une ligne par fonction" },
     { "description": "une vocation par fonction" },
     { "description": "un rôle par classe" },
   ];
}

Remarquez le format du contrôleur : il s'agit d'une fonction acceptant un objet nommé $scope, et qui en modifie un « attribut » (nommé ici trucs, mais le nom est à votre discrétion) en déposant les données appropriées sous forme d'iun tableau d'objets JSON. En pratique, ces données proviendraient probablement d'une base de données ou d'un lien réseau
Ajoutez à votre balise html la mention ng-app, en lui ajoutant de manière optionnelle un nom. Par exemple, <html ng-app> ou <html ng-app="nomApp"> où nomApp serait le nom de l'application que représente votre page Web. N'utilisez un nom d'application que si vous avez recours aux modules d'Angular.js – voir plus bas
Ajoutez à votre balise body la mention ng-controller, en lui ajoutant le nom de votre contrôleur. Par exemple, <body ng-controller="TrucsChouettesCtrl"> dans le cas qui nous intéresse. Dans ce cas, le code JavaScript de la fonction TrucsChouettesCtrl joue le rôle de source de données pour l'application Angular.js que représente la page Web
À l'endroit où l'on souhaite utiliser les données provenant du contrôleur, la page Web contiendra certaines indications particulière. Dans notre exemple (classique), nous créerons une liste des éléments pris du tableau $scope.trucs, en nommant chacun de ces éléments truc et en construisant une liste (des puces) à l'aide de ces éléments. Le code sera :

<ul><li ng-repeat="truc in trucs"><strong>Un bon truc</strong>&nbsp;: {{truc.description}}</li></ul>

Ici, le ng-repeat="truc in trucs" est une sorte de for(auto &truc : trucs) avec C++, ou de foreach(truc in trucs) en C#, ou de for(Object truc : trucs) en Java. La mention {{truc.description}} fait quant à elle référence à « l'attribut » description de chaque objet truc. En pratique, on verra s'afficher dans la page Web une liste avec puces des trucs fournis par le contrôleur, chacune des puces ayant pour préfixe un petit texte
Côté vocabulaire, un ng-repeat est ce qu'on nomme un Angular Repeater, donc un outil pour générer le même code HTML pour chaque élément fourni par le contrôleur, alors qu'une donnée entourée de paires d'accolades, par exemple {{xyz}} est un Binding, sorte de variable intelligente qui fait le pont entre un élément de génération de code par Angular

On peut aller très loin avec Angular. D'autres exemples suivront...

Exemple sans contrôleur

La table ci-dessous est générée par programmation, strictement à l'aide d'un mélange de code HTML et de directives Angular.js :

	Colonne {{col+1}}
Ligne {{ligne}}	{{ligne}}{{col+1}}

Exemple basé sur un contrôleur

Dans ce qui suit, un contrôleur fournit des conseils d'un individu, le nombre de conseils variant selon l'individu, et une interaction avec le bouton « Prochain » permet de passer d'un individu à l'autre, ce qui met bien sûr à jour les conseils.

Quelques conseils de... {{source}} :

Un bon truc : {{truc.description}}