Vous êtes sur la page 1sur 30

Applications web SPA

A. DAAIF
ENSET Mohammedia Universit Hassan II Casablanca
AngularJS en trois pas
Introduction
Applications SPA
Concepts implments dans ng
Commencer avec AngularJS

Premier pas
Directives
Liaison de donnes
Filtres

Deuxime pas
Vues
Contrleurs
Scope (inclus le modle)

Troisime pas
Modules
Routes
Services
0 Applications SPA
0 Applications SPA

Dfis dune application SPA :


Manipulations DOM

Routage (correspondance url vue)

Gestion de lhistorique (suivant prcdent du navigateur)

Ajax (Chargement des modules et vues)

Gestion du cache

Liaison de donnes
AngularJS propose une approche intelligente pour
relever ces dfis.
0 Concepts et fonctionnalits de NG

AngularJS nest pas une librairie JavaScript.


AngularJS est un framework qui met en place un
cadre de dveloppement dapplication web.
Les applications cres par AngularJS sont :
Modulaires (des quipes peuvent travailler sparment
su la mme application)

Testables (Encouragent les bonnes pratiques de


dveloppement. TDD et Tests unitaires)

Evolutives (Utilisent des patrons de conceptions


confirms, tels que linjection de dpendances, MVC, )
0 Concepts et fonctionnalits de NG

AngularJS is a full-featured SPA framework

Data
MVC Routing View
Binding

ViewModel Template Controller Directive

Dependency
Service History Animation
Injection
0 Getting started

Tlcharger AngularJS.
0 Getting started
Crer page html index.html .

<!DOCTYPE html>
<html lang="fr" ng-app>
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
</head>
Attacher AngularJS
<body>
<input type="text" ng-model="nom" placeholder="Votre nom">
<hr>
Bonjour : {{nom}}
</body>
</html>
1 Directives et Liaison de donnes
Une Directive ajoute des fonctionnalits au HTML
Un Template value une expression.

Directive
<!DOCTYPE html>
<html lang="fr" ng-app>
<head>
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
Directive
</head>
<body>
<input type="text" ng-model="nom" placeholder="Votre nom">
<hr>
Bonjour : {{nom}}
</body>
</html>
Template et Liaison de donne
1 Directives et Liaison de donnes

AngularJS privilgie laspect dclaratif


La plupart des balises sont augmentes par des
attributs ng-* .

Extrait de la
documentation
de AngularJS

Exemple pour la balise


<input type="text" >
1 - Filtres

Utilisation de loprateur pipe |


On peut chainer les filtres. (Expression|filtre1|filtre2)

<input type="text" ng-model="nom" >


<ul ng-init="persons=['Ahmed', 'Rda', 'Youssra']">
<li ng-repeat="person in persons | filter:nom">
{{person | uppercase}}
</li>
</ul>
Le tableau est filtr par la chaine entre
Le contenu est transform en majuscule dans le champ de texte
2 Vues, Contrleur et Scope

Prsentation Logique mtier

View Donnes Controller


2 Vues, Contrleur et Scope

View $scope Controller

Le Scope est un objet qui permet de partager les donnes


entre la vue et le contrleur; Le Modle.

La vue ne doit rien savoir sur le contrleur


Le contrleur ne doit rien savoir sur la vue
2 - Contrleurs Dfinit le la portion du DOM gre
par le module. (lapplication)
<html lang="fr" ng-app="myApp">
Dfinit le la portion du DOM gre
par le contrleur.
<body ng-controller="PersonCtrl">
<input type="text" ng-model="nom"placeholder="Filtrer">
<ul> </ul>
$scope est le modle.
<script> Il est inject
// Crer un module automatiquement par
var app = angular.module('myApp', [ ] ); AngularJS
// Y ajouter un contrleur
app.controller('PersonCtrl', function ($scope){
$scope.persons = ['Ahmed', 'Rda', 'Youssra'];
});
</script>
</body>
2 Contrleurs et Scope ($scope)

<input type="text" ng-model="newPerson" placeholder="Ajouter">


<button ng-click="addPerson()">Ajouter</button>
<script>
var app = angular.module('myApp', [] );
app.controller('PersonCtrl', function ($scope){
$scope.persons = ['Ahmed', 'Rda', 'Youssra'];
$scope.addPerson = function(){
$scope.persons.push($scope.newPerson);
$scope.newPerson = '';
}
});
</script>
2 Rcuprer les donnes du serveur

Le fichier usa.json est de la forme :

[
{
"state": "Alabama",
"cities": ["Birmingham", "Mobile", "Montgomery", "Huntsville"
{
"state": "Alaska",
"cities": ["Anchorage", "Juneau"]
},

2 Rcuprer les donnes du serveur


On limite laffichage 10 tats
<body ng-controller="statesCtrl">
<ol>
<li ng-repeat="st in states | orderBy:st.state| limitTo:10">
{{st.state | uppercase}}
</li>
</ol> Service $http inject par AngularJS
<script>
var app = angular.module('myApp', [] );
app.controller('statesCtrl', function ($scope, $http){
$scope.states = loadStates();
function loadStates(){
$http.get('usa.json' ).success(function(data){
$scope.states = data;
});
return []; Valeur [] affecte $scope.states, en
} attendant que la promesse Ajax soit
}); rsolue.
</script>
</body>
2 Rcuprer les donnes du serveur
<ol>
<li ng-repeat="st in states | orderBy:st.state | limitTo:10">
{{st.state | uppercase}}
</li>
</ol>
<script>
var app = angular.module('myApp', [] );
app.controller('statesCtrl', function ($scope, $http){
$scope.states = loadStates();
function loadStates(){
$http.get('usa.json' )
.success(function(data){
$scope.states = data;
});
return [];
}
});
</script>
2 Afficher les villes pour chaque tat

<ol>
<li ng-repeat="st in states | orderBy:st.state| limitTo:10">
{{st.state | uppercase}}
<ul>
<li ng-repeat="city in st.cities">
{{city}}
</li>
</ul>
</li>
</ol>
3 - Modules
Un module est un conteneur. Il permet dorganiser le code.

Dans un module, on peut enregistrer des :

Configurations

Contrleurs
Le module myApp dpend des modules :
1. $ngRoute
Services
2. myModule
Ceux-ci seront injects automatiquement par
Directives AngularJS

Filtres

Un module peut dpendre dautres modules :


var app = angular.module('myApp', ['$ngRoute', 'myModule']);
3 - Services

Les services sont instancis au moment de leur premire


utilisation. Ce sont des Singleton .
Il sont construits laide de la mthode factory() ou
service() dun module.
app.factory('serviceStates', function(){
return {
states : ['Alabama','Alaska','Arizona','Arkansas']
};
});
Un service ainsi dfini, peut tre utilis dans nimporte quel contrleur
du module. Il suffit de le rfrencer comme une dpendance.
app.controller('statesCtrl', function($scope, serviceStates){
$scope.states = serviceStates.states;
});
3 - Services
<body ng-controller="statesCtrl">
<h2>USA States</h2>
<ul>
<li ng-repeat="state in states">
{{state | uppercase}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.factory('serviceStates', function(){
return {
states : ['Alabama','Alaska','Arizona','Arkansas']
};
});
app.controller('statesCtrl', function($scope, serviceStates){
$scope.states = serviceStates.states;
});
</script>
Injection du service serviceStates
</body>
3 - Routes - Structure ?

Module

Config

Route

View $scope Controller


3 - Routes module ngRoute

Les routes sont gres par le module ngRoute qui


nest pas intgrs dans le core de AngularJS.
Pour lajouter :
3 Routes States / cities

La page index.html :
<html lang="fr" ng-app="myApp">
<head>
Attacher le script du module ngRoute
<meta charset="UTF-8">
<title>Test AngularJS</title>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body ng-controller="statesCtrl">
<h2>USA States</h2> Lendroit o les vues partielles vont
safficher
<div ng-view></div>
<script> // et le reste
3 - Routes provider $routeProvider

1. Notre module myApp dpend du module


ngRoute :
var app = angular.module('myApp', ['ngRoute']);
ngRoute fournit le provider : $routeProvider
2. Nous utilisons la mthode config() du module pour
configurer les routes :
app.config(function($routeProvider){
// configurer les routes ici avec $routeProvider
});
3. Dfinir les routes laide des mthodes when() et
otherwise() du provider $routeProvider :
3 Routes States / cities Injection des
dpendances

Configuration des routes :

var app = angular.module('myApp', ['ngRoute']);


app.config(function($routeProvider){
$routeProvider.when( '/', {
Injection des
templateUrl: 'states.html', dpendances
controller: 'statesCtrl'
} ).when( '/:state/cities', {
templateUrl: 'cities.html', :state est un
paramtre durl
controller: 'statesCtrl'
})
});
3 Routes States / cities Injection des
dpendances

Le contrleur :
app.controller('statesCtrl', function($scope, $http, $routeParams){
$scope.params = $routeParams;
$scope.states = getStates();
function getStates(){ // requete Ajax et affectation $scope.states }
$scope.getCities = function(state){
var states = $scope.states;
Requte Ajax pour
for(var i=0; i<states.length; i++){ rcuprer le tableau
if(states[i].state == state) des states

return states[i].cities;
}
Ligne 2 : Mise disposition des paramtres durl aux vues
}
dans la variable $scope.params .
});
3 Routes States / cities

Les vues :
<!-- states.html -->
Vues states.html
<ul>
<li ng-repeat="st in states | limitTo:10">
{{st.state}}
<a href="#/{{st.state}}/cities" style="float: right;">cities</a>
</li>
</ul>

<!-- cities.html --> url construite pour


chaque state
<ul><strong>{{params.state}}</strong>
<li ng-repeat="city in getCities(params.state)">
{{city}}
</li>
<a href="#/">Retour</a> Vues cities.html
</ul>
3 Routes States / cities
Arizona

Le Rsultat: