M.
ETTIFOURI El Hassane
SUPMTI 2015/2016
Les bases dAngularJS
Introduction
AngularJS est n en 2009 dans les locaux de
Google.
Angular est construit autour des concepts cls
suivants:
o Architecture MVVM (Modle-Vue-Vue-Modle)
o
o
o
o
Two-way data binding
Injection de Dpendances
Manipulation du DOM au moyen de directives
SPA (Single Page Application)
Introduction
Prcision prliminaire pour les dveloppeurs
JavaScript "old school": avec Angular, il n'y a, en
gnral, pas de manipulation directe du DOM.
Avec jQuery, Prototype et autres librairies JavaScript,
on doit presque toujours slectionner un lment (via
l'API DOM) pour pouvoir l'utiliser.
Avec AngularJS on peut ajouter, supprimer et modifier
la page HTML sans faire aucun appel au DOM: plus
besoin de $(), getElementByID(), ...
Note: les accros jQuery ont toutefois accs, depuis
Angular, jQLite (un jQuery Lite) mais c'est souvent
dconseill.
SPA: Single Page Application
SPA: Single Page Application
AngularJS permet de dvelopper des
applications Web de type SPA.
Une SPA (Single Page Application) est
une application web accessible via une
page web unique.
Le but est dviter le chargement dune
nouvelle page chaque action demande
et d'amliorer ainsi lexprience utilisateur
(meilleure fluidit).
SPA: Single Page Application
La diffrence entre une SPA et un site web
classique rside dans leur structure et dans la
relation qu'ils tablissent entre le navigateur et le
serveur:
Une SPA est donc compose dune seule page. Le
rle du browser (front-end) est beaucoup plus
important : toute la logique applicative y est dporte.
Le serveur (back-end) est "seulement" responsable
de la fourniture des ressources lapplication et
surtout de l'exposition des donnes.
Pourquoi le SPA ?
Les frameworks JS comme AngularJS et
EmberJS participent la popularit des SPA.
Les SPA s'appuyant sur de tels frameworks ont
en gnral comme avantage d'tre:
o
o
o
o
o
testables (unitairement et
fonctionnellement)
fluides (pas de rechargement durl etc)
bien organises
maintenables et volutives
...
SPA: les piges viter
Nanmoins il y a plusieurs points prendre en
compte lorsquon ralise une SPA pour viter
des problmes potentiels:
1.
2.
3.
La taille du DOM (trop gros il peut ralentir fortement le browser).
Les traitements (trop lourds il peuvent ralentir le browser).
Lempreinte mmoire de l'application (qui doit tre la plus
rduite possible).
Solutions:
1.
2.
3.
Essayer de ne charger que les lments ncessaires
lutilisateur du site et dcharger les autres.
Ecrire et tester correctement son code.
Utiliser une solution base sur un "virtual DOM" ([Link] est
un framework JavaScript pionnier en la matire).
SPA: les piges viter
Autre sujet qui peut tre un problme avec les SPA: le
rfrencement (problmatique du "SEO" - Search
Engine Optimization).
Les moteurs de recherche ont du mal "crawler des
sites dynamiquement grs par du JavaScript.
Des solutions existent pour fournir spcifiquement
Google une version correspondante aux
"snapshots HTML gnrs par les applications SPA.
Ces solutions sont accessibles soit en mode SAAS
(payantes et hberges) soit en mode Open- Source
hberger soi-mme.
Two-way data binding
Une des fonctionnalits phares dAngularJs est
le two-way data binding qui permet de notifier
tous les lments qui font rfrence une
variable, de son changement.
Ainsi sans coder explicitement du JavaScript,
on peut mettre jour en temps rel un titre qui
fait rfrence un champ texte.
Exemple :
<script src="lib/angular/[Link]" ...
<input type="text" ng-model="yourName">
<h1>Hello {{yourName}} !</h1>
Premier pas avec
(TP 1)
Crer une page web simple ([Link])
affichant les lments suivants :
Un titre (H1) : Premier pas avec AngularJs
Un formulaire ayant :
Texte Saisir votre nom suivi dune zone de
saisi de texte nom
Texte Saisir votre ville suivi dune zone de
saisi de texte ville
Un texte dynamique : Bonjour $nom, votre
ville est $ville , avec $nom et $ville sont les
valeur saisies
Premier pas avec
(TP)
Les tapes suivre :
1. Rfrencer la librairie JS :
<script src="lib/angular/[Link]" >
</script>
2. Ajouter un <div ng-app=""> qui regroupe
tous les lments de la page.
3. Utiliser le ng-model pour les variables des
champs du formulaire
4. Utiliser les {{ et }} pour afficher le
contenu des variables du ng-model.
Premier pas avec
(TP 2)
Crer une page web simple ([Link])
permettant deffectuer la somme de deux
entiers saisis dans un formulaire et afficher le
rsultat dans la mme page :
Texte Saisir la valeur de A suivi dune zone
de saisi de texte valA
Texte Saisir la valeur de B suivi dune zone
de saisi de texte valB
La somme de valA et valB = valA + valB
Vues
Utilisation des attributs ng (directives) sur les
elements HTML
ng-app
ng-controller
Dtermine quelle partie de la page va utiliser angularjs
Si il contient une valeur, il va charger le module d'application
Dtermine quel contrleur Javascript doit tre utilis pour la
partie de la page
ng-model
Dtermine quel modle d'un champ de saisie sera li la valeur
Utilis pour la liaison bidirectionnelle (Used for two-way binding)
15
Contrleurs et Data Binding
Data Binding : les vues sont automatiquement modifies lors dun
changement du modle par un contrleur.
Les contrleurs sont attachs aux lments du DOM et font voluer le
modle en fonction des actions de lutilisateurs ou dvnements.
<!doctype html>
<html ng-app>
<!-- ... -->
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="src">
<button ng-click="copy()">Copier</button>
<h1>{{dst}}</h1>
</div>
</body>
</html>
16
Contrleurs et Data Binding
Data Binding : les vues sont automatiquement modifies lors
dun
changement du modle par un contrleur.
Les contrleurs sont attachs aux lments du DOM et font
voluer
le modle en fonction des actions de lutilisateurs ou dvnements.
La fonction qui permet de construire une instance du contrleur :
function MyCtrl($scope) {
$[Link] = function() {
$[Link] = $[Link];
}
}
La variable $scope rfrence un objet qui correspond la partie du
modle attache llment du DOM contrle.
17
Scopes et RootScope
La variable $RootScope contient lintgralit du modle alors que la
variable $scope contient uniquement la partie du modle attache
llment du DOM :
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="src">
<button ng-click="copy()">Copier</button>
</div>
<h1>{{dst}}</h1>
</body>
______________________________________
function MyCtrl($scope, $rootScope) {
$[Link] = function() { $[Link] = $[Link]; }
}
18
Scopes et RootScope
Porte des scopes :
<body>
<div ng-controller="MyCtrl">
{{ dst }}
</div>
{{ dst }}
</body>
_______________________________
function MyCtrl($scope, $rootScope) {
$[Link] = "rootScope";
$[Link] = "scope";
}
Chaque contrleur peut donc avoir une partie du modle comme
contexte.
19
Template ng-repeat
<body ng-controller="ListCtrl">
<input ng-model="item">
<button ng-click="add()">add</button>
<ul><li ng-repeat="e in items">
{{ e }}
</li></ul>
</body>
______________________________
function ListCtrl($scope) {
$[Link] = [];
$[Link] = function() {
$[Link]($[Link]);
}
}
20
Template visibilit
Il est possible de masquer ou dafficher certains
lments :
<body>
<input type="checkbox" ng-model="checked">
<span ng-show="checked">coch</span>
<span ng-hide="checked">non coch</span>
<input type="text" ng-model="data">
<ul ng-switch on="data">
<li ng-switch-when="toto">data==toto</li>
<li ng-switch-when="truc">data==truc</li>
<li ng-switch-default>data!=toto and data!=truc</li>
</ul>
</body>
21
Template style
Il est possible de modifier la classe et le style des lments :
<body ng-init="style={color:'green'}">
<button ng-click="style={color:'red'}">Rouge</button>
<button ng-click="style={color:'black'}">Noir</button>
<span ng-style="style">zadza</span>
<pre>style={{style}}</pre>
</body>
_______________________________
<body ng-init="cls='green'">
<button ng-click="cls='red'">Rouge</button>
<button ng-click="cls='black'">Noir</button>
<span ng-class="cls">zadza</span>
</body>
22
Template formulaire
<form name="myForm">
<input name="input" type="text" name="input"
ng-model="text" ng-pattern="/^[a-z]{3,6}$/" required>
<button ng-disabled="!myForm.$valid" type="submit">
Envoyer
</button>
<span class="error" ng-show="[Link].$[Link]">
Ncessaire
</span>
<span class="error" ng-show="[Link].$[Link]">
3 6 lettres miniscules
</span>
</form>
23
Template vnements
<body ng-controller="MyCtrl">
<div ng-click="onEvent('click')">click</div>
<div ng-mousedown="onEvent('down')">down</div>
<div ng-mouseup="onEvent('up')">up</div>
<div ng-mouseenter="onEvent('enter')">enter</div>
<div ng-mouseleave="onEvent('leave')">leave</div>
<div ng-mouseover="onEvent('over')">over</div>
<input ng-model="data" ng-change="onEvent('change')">
</body>
___________________________
function MyCtrl($scope) {
$[Link] = function(s) { [Link](s); }
}
24
Template les liens et les images
<body ng-controller="MyCtrl">
<div ng-repeat="item in items">
<a ng-href="{{[Link]}}">
<img ng-src="{{[Link]}}">
</a>
</div>
</body>
______________________________
function MyCtrl($scope) {
$[Link] = [
{img : "[Link]", rimg : "[Link]" },
{img : "[Link]", rimg : "[Link]" }
];
}
25
Template utilisation des filtres
<body ng-controller="ListCtrl">
<input ng-model="item">
<button ng-click="add()">add</button>
<input ng-model="query">
<ul><li ng-repeat="e in items | filter:query">
{{ e }}
</li></ul>
</body>
________________________________
function ListCtrl($scope) {
$[Link] = [];
$[Link] = function() {
$[Link]($[Link]);
}
}
26
TP 3
Crer un fichier [Link] et un ficheir
[Link] pour tester exemples offerts dans les
slides prcdents pour valider les
fonctionnalits offertes par AngularJs :
Sparer les dmos par des titres expliquant la
fonctionnalit teste (utiliser la balise H1 ).
Le fichier [Link] doit contenir les contrleurs et
les traitements des diffrentes dmonstrations.
Noublier pas dimporter les fichiers JS
dAngularJS ainsi le [Link] dans la page
[Link]
27
TP 4 (Gestions des emails)
Crer une application (GestEmail)
permettant la ralisation des oprations
suivantes CRUD :
crations des emails via un formulaire,
Validation des valeurs saisies et affichage des
messages derreur.
Sil y a des emails crs, les affichage dans un
tableau; sinon, afficher le message aucun
email ni trouv ,
modifications dun email donn.
Suppressions dun email donn.
28
Les modules
La faon de construire lapplication est spcifie par des
modules.
Dans les modules, on spcifie ce qui est partag dans
lapplication.
Un module peut dpendre dautres modules.
Lapplication a un module principal.
Dans le code HTML :
<!doctype html>
<html ng-app="myApp">
<!-- ... -->
</html>
Ct JavaScript :
var myApp = [Link]('myApp', [ ]);
29
Les modules
Un exemple avec la dfinition dun nouveau contrleur :
var myApp = [Link]('myApp', [ ]);
[Link]('MyCtrl', function MyCtrl($scope) {
$[Link] = function() {
$[Link] = $[Link];
}
});
Utilisation du filtre ct HTML :
<!doctype html>
<html ng-app>
<!-- ... -->
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="src">
<button ng-click="copy()">Copier</button>
<h1>{{dst}}</h1>
</div>
</body>
</html>
30
Les modules
Trois sortes dlments peuvent tre dfinis dans un module :
Un service (un objet partageable);
Une directive (nouvel lment ct HTML);
Un filtre (voir le transparent prcdent).
Il est recommand de sparer les diffrents lments :
var myAppService = [Link]('[Link]', []);
var myAppDirective = [Link]('[Link]',
[]);
var myAppFilter = [Link]('[Link]', []);
var myApp = [Link]('myApp', ['[Link]',
'[Link]', '[Link]']);
31
Les modules
Il est possible dexcuter du code au lancement de lapplication :
var myApp = [Link]('myApp', []);
[Link](function($rootScope) {
$[Link] = "Mon message";
});
___________________________
<!doctype html>
<html ng-app="myApp">
<head><!-- ... --></head>
<body>
{{ message }} <!-- devient "Mon message" -->
</body>
</html>
32
