Premiers pas avec AngularJS ~ www.batteries-plus.fr

Saturday, July 12, 2014

Premiers pas avec AngularJS

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">

<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 texteCLEVO batteries‍, 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 src="{{spoken.flag}}" height=50></img> </body>

Ce qui donne :

MSI Wind U90 U90X U100 U100X BTY-S11 BTY-S12 white battery‍

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 BenQ batteries 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 :