Premiers pas avec AngularJS

Septembre 2016

AngularJS est un framework JavaScript pour la réalisation de pages web dynamiques.
Il peut être utilisé comme alternative ou en complément d'autres framework, notamment jQuery.


Hello World!


Voici un premier exemple d'utilisation d'AngularJS :

index.html
<!doctype html>
<html ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<body ng-controller="firstCtrl">
    <h1>{{title}}</h1>
</body>
</html>

firstApp.js
var firstApp = angular.module('firstApp', []);

firstApp.controller('firstCtrl', function ($scope) {
    $scope.title = 'Hello World!';
});

Résultat :
Quelques explications pour comprendre :

Sur l'instruction
<script src="firstApp.js"></script>
on ajoute le script AngularJs qui va définir le module
angular.module('firstApp', []);
et un contrôleur
controller('firstCtrl'
. Ceux-ci sont respectivement liés dans la page html avec
<html ng-app="firstApp">
et
<body ng-controller="firstCtrl">
.

Toutes les directives commençant par
ng-
sont spécifiques à AngularJS. De même que les accolades
{{ }}
qui permettent d'afficher dans la page html une variable déclarée dans le scope du contrôleur.
Dans notre exemple
{{title}}
affiche donc la valeur de
$scope.title
, c'est à dire "Hello World!".

Les variables de scope


La programmation en AngularJS consiste principalement à modifier dynamiquement les variables du scope dans le contrôleur et les afficher dans la page web. AngularJS va automatiquement mettre à jour l'affichage au fur et à mesure que les valeurs changent.

Exemple :

<body ng-controller="firstCtrl">
    <input type="text" ng-model="text">
    <pre>{{text}}</pre>
</body>

Ici, on créé un champs texte, lié au scope par la directive
ng-model="text"
et que l'on affiche ensuite avec
{{text}}
.

À chaque modification de la valeur dans le champs texte, le paragraphe en dessous change également.

Remarque : il n'est pas nécessaire de modifier le fichier javascript pour déclarer la variable
$scope.text
, celle-ci sera undefined jusqu'à ce qu'une première valeur soit entrée dans le champs texte, puis automatiquement mise à jour.

Communication avec JSON


Le fonctionnement d'AngularJS se prête bien à une utilisation intensive de données au format JSON, notamment grâce à différentes directives de répétitions.

Par exemple, pour la gestion d'une liste de langues.

$scope.languages = [
    {"id":"FR", "name":"Français", "flag":"http://flagpedia.net/data/flags/normal/fr.png"},
    {"id":"EN", "name":"English", "flag":"http://flagpedia.net/data/flags/normal/gb.png"},
    {"id":"ES", "name":"Español", "flag":"http://flagpedia.net/data/flags/normal/es.png"},
    {"id":"DE", "name":"Deutsch", "flag":"http://flagpedia.net/data/flags/normal/de.png"},
    {"id":"IT", "name":"Italiano", "flag":"http://flagpedia.net/data/flags/normal/it.png"}
    ];
    
$scope.spoken = $scope.languages[0];

<body ng-controller="firstCtrl">    
    <ul>
        <li ng-repeat="lang in languages">
            <img ng-src="{{lang.flag}}" width=20></img> {{lang.name}}
        </li>
    </ul>
    
    <select ng-model="spoken" ng-options="lang as lang.name for lang in languages">
    </select>
    
    <img ng-src="{{spoken.flag}}" height=50></img>
</body>

Ce qui donne :
Dans cet exemple la page html ne nécessiterait aucune modification pour ajouter ou supprimer une langue, seule la valeur de
$scope.languages
serait à actualiser.

Cette facilité d'interaction avec le JSON permet d'envisager une architecture client/serveur de type REST par exemple. C'est à dire faire des appels au serveur pour récupérer, à l'initialisation de la page, ou à la demande, les valeurs de chaque variable du scope.

Remarque : l'utilisation de ng-src dans les images (au lieu de src) évites au navigateur d'aller télécharger une image avec un chemin entre accolades
{{lang.flag}}
qui évidemment n'existerait pas.

Les bibliothèques


Le coeur d'AngularJS est relativement important, on pourra en trouver une documentation très riche sur le site officiel (en anglais) et ainsi découvrir ses fonctionnalités avec une revue exhaustive des options et quelques exemples.

https://docs.angularjs.org/api

Mais AngularJS ne se limite pas seulement à son API de base, c'est un langage extensible, cela permet donc à tout à chacun de développer ses propres modules et de les mettre à disposition.

Un certain nombre de bibliothèques sont d'ores et déjà disponibles sur internet. Citons en particulier AngularUI qui disposent de plusieurs modules pour l'affichage, dont une réécriture complète de Bootstrap (initialement basé sur jQuery).

http://angular-ui.github.io/

Pour ajouter une dépendance à un module, il faut le passer en paramètre du tableau d'initialisation.
Par exemple pour le module Bootstrap d'AngularUI on aurait :

var firstApp = angular.module('firstApp', ['ui.bootstrap']);

On peut alors modifier la page web pour utiliser les fonctionnalités du nouveau module et par exemple avec Bootstrap faire afficher les drapeaux de chaque langue dans un petit diaporama :

<!doctype html>
<html ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<body ng-controller="firstCtrl">
    <div style="width:500px">
        <carousel interval="1500">
            <slide ng-repeat="lang in languages">
                <img ng-src="{{lang.flag}}" style="margin:auto; max-height:200px"></img>
                {{lang.name}}
            </slide>
        </carousel>
    </div>
</body>
</html>

Voici le résultat attendu :

A voir également :

Ce document intitulé «  Premiers pas avec AngularJS  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.