AngularJS je m'y mets !

Initialisation d'AngularJS

AngularJS est une librairie javascript. Pour l'utiliser il faut donc la référencer dans nos pages. Comme souvent il y a deux possibilités : télécharger le fichier et le déposer sur son serveur ou utiliser un CDN. Si avoir le code sous la main peut être pratique pendant la phase de développement, il est beaucoup plus efficace de passer par un CDN dans la phase production (mise en cache, accès rapide, parallélisme des requêtes...).

Vous trouvez le fichier d'AngularJS sur le site. Vous trouvez au même endroit le lien du CDN. Il est conseillé de référencer le lien de la librairie à la fin de la page HTML pour que celle-ci se charge correctement sans avoir à attendre. Mais la différence n'est pas très sensible, d'autant que la mise en cache de la librairie rend cette considération sans objet pour les chargements suivants.

Le chargement de la librairie ne suffit pas pour avoir AngularJS actif sur une page, il faut aussi définir la portion de code qui est concerné. Pour cela il faut placer la directive ngApp dans la balise englobante. Voici donc le code minimal d'une page qui prend en compte AngularJS :

<!doctype html>
<html ng-app>
	<body>
		...
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
	</body>
</html>

Ici la directive ngApp a été mise dans la balise html, on veut donc faire agir AngularJS sur toute la page. On aurait pu limiter la portée à une balise enfant. Il n'y a rien de plus à faire pour initialiser AngularJS, c'est la version automatique. La directive provoque l'auto-initialisation d'AngularJS. Il existe aussi une version manuelle si vous voulez agir sur la configuration de démarrage d'Angular. Pour le moment il ne se passe pas grand chose dans notre code. Mais nous allons bientôt animer un peu tout ça !

Vous vous posez peut-être la question de la syntaxe du nom de la directive ngApp. Pourquoi du camelCase qui se transforme en snake_case ? Et bien tout simplement parce que c'est une représentation générique. On invoque les directives en passant en snake_case avec différentes formes possibles : ng:app, ng-app, ng_app, x-ng-click et data-ng-app. Vous avez le choix de la forme, notez toutefois que les validateurs HTML5 préfèrent la forme data-ng-app !

Suivant

Retour à l'accueil...