Ma première application AngularJS
1. Introduction
Dans ce chapitre est expliqué comment créer une première application, du référencement des scripts d'AngularJS à l'affichage d'un simple message.
2. Référencer AngularJS
Avant de pouvoir utiliser AngularJS, il faut référencer ce framework sur la page HTML de l'application.
Google expose le framework AngularJS via son CDN. Un CDN, ou Content Delivery Network, est une infrastructure permettant de distribuer, de manière optimisée, des ressources, généralement des fichiers CSS ou JavaScript, à des sites web hébergés dans le monde entier.
L'un des avantages du CDN est de pouvoir partager des ressources à travers plusieurs sites web. Si un utilisateur visite plusieurs sites référençant le framework AngularJS via le CDN de Google, il n'aura à télécharger qu'une fois ce framework. Quand l'utilisateur ccédera au premier site, le navigateur téléchargera les ressources puis les mettra en cache. Quand l'utilisateur accédera aux autres sites web, le navigateur n'aura pas à retélécharger les ressources communes et pourra utiliser les versions mises en cache.
Pour utiliser le CDN de Google, le code est le suivant :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/ angular.js"></script>
L'exemple précédent référence la version 1.3.4 d?AngularJS via le CDN de Google.
Si le site web nécessite d'avoir le framework en local, par exemple si l'application est déployée dans un intranet et n'a pas accès à l'extérieur, il est possible de le télécharger sur le site officiel https://angularjs.org/.
Après l'avoir téléchargé et copié en local, il faut utiliser ce code :
<script type="text/javascript" src="/scripts/angular.js"></script>
L'exemple précédent référence AngularJS situé dans un répertoire scripts.
Le site officiel d'AngularJS liste les différentes versions du framework. Pour chaque version, il est possible de télécharger le script associé et de visualiser l'adresse du script exposé sur le CDN de Google.
3. Définir la portée d'AngularJS
L'attribut ng-app permet de spécifier quelle partie de la page HTML AngularJS doit gérer.
<html ng-app="MonApplication"> ... </html>
La syntaxe précédente indique à AngularJS de gérer toute la page HTML. La valeur MonApplication de l'attribut ng-app spécifie quelle application doit être chargée.
Généralement, l'attribut ng-app est positionné sur un élément racine du DOM, par exemple la balise html ou body. Mais si une partie de la page est statique ou est gérée par un autre framework, il faut positionner l'attribut ng-app sur l'élément racine de la zone devant être géré par AngularJS.
<html>
<!-- Zone non gérée par AngularJS -->
<div ng-app="MonApplication">
<!-- Zone gérée par AngularJS -->
</div>
</html>
Dans la page précédente, seul le contenu de la div sera géré par AngularJS.
4. Création d'une application
Comme il a été vu (cf. chapitre Introduction à AngularJS - section Organisation de l'application), ce framework s'organise autour des patterns MVC. MVVM, c'est-à-dire autour du modèle chargé de contenir les données, d'une vue chargée de les afficher et d'un contrôleur dont le rôle est d'initialiser le modèle et de réagir aux actions de l'utilisateur.
4.1 Modèle
Le modèle est représenté par un objet ou une valeur JavaScript.
var user = { name: "Sebastien", lastName: "Ollivier" };
4.2 Contrôleur
Le contrôleur est une classe JavaScript prenant en paramètre l'objet $scope, représentant le modèle.
Remarque
L'objet $scope est automatiquement fourni au contrôleur via le mécanisme d'injection de dépendances utilisé par AngularJS. Cette notion sera vue plus en détail dans le chapitre Structurer son application - section Injection de dépendances.
function MonControleur($scope) {
$scope.user = { name: "Sebastien", lastName: "Ollivier" };
}
Toute propriété ou fonction ajoutée par le contrôleur à l'objet $scope sera accessible par la vue.
La déclaration d'un contrôleur se fait dans un module AngularJS, représentant l'application. Cette notion sera vue plus tard dans le chapitre Structurer son application.
angular.module("MonApplication", [])
.controller("MonControleur", MonControleur);
La méthode module est appelée pour créer le module MonApplication. La méthode controller est ensuite utilisée pour déclarer le contrôleur MonControleur.
4.3 Vue
La vue est une page HTML chargée d'afficher les données du modèle.
<body ng-controller="MonControleur">
<h1>Ma première application</h1>
<p>Bonjour {{user.name}} {{user.lastName}} !</p>
</body>
L'attribut ng-controller lie un contrôleur à la vue. De cette manière, le modèle, initialisé par le contrôleur, sera accessible par la vue dans la zone où est positionné l'attribut.
La syntaxe {{ }} crée un lien, un data binding, entre la vue et une propriété du modèle. À l'affichage de la vue, le marqueur précédent sera remplacé par la valeur de la propriété du modèle. Ce data binding est de type one-way, c'est-à-dire qu'à chaque modification de la propriété par le contrôleur, la vue sera automatiquement mise à jour.
5. Application complète
L'ajout de tous les éléments vus précédemment donne la page suivante :
<html ng-app="MonApplication">
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/
angular.min.js"></script>
</head>
<body ng-controller="MonControleur">
<h1>Ma première application</h1>
<p>Bonjour {{user.name}} {{user.lastName}} !</p>
<script type="text/javascript">
function MonControleur($scope) {
$scope.user = { name: "Sebastien",
lastName: "Ollivier" };
}
angular.module("MonApplication", [])
.controller("MonControleur",
MonControleur);
</script>
</body>
</html>
L'affichage de la page donne le résultat qui suit :
Cet article est constitué à partir de bonnes feuilles issues de l'ouvrage "AngularJS Développez aujourd'hui les applications web de demain" publié chez Eni. Nous publions ces bonnes feuilles en deux parties. La semaine dernière, vous avez découvert le chapitre "AngularJS".