Angular Js

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>
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"]
},


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>
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>
<ol>
<li ng-repeat="st in states | orderBy:st.state | limitTo:10">
</li>
</ol>
<script>
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">
<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
<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
<script src="js/angular-route.js"></script>
</head>
<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 .
});
Les vues :

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>
 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>
Arizona
Le Rsultat:

Angular Js

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Angular Js

Hochgeladen von

Copyright:

Verfügbare Formate

Applications web SPA

Dfis dune application SPA :

Routage (correspondance url vue)

Gestion de lhistorique (suivant prcdent du navigateur)

Ajax (Chargement des modules et vues)

AngularJS nest pas une librairie JavaScript.

Testables (Encouragent les bonnes pratiques de

Evolutives (Utilisent des patrons de conceptions

AngularJS is a full-featured SPA framework

ViewModel Template Controller Directive

AngularJS privilgie laspect dclaratif

Exemple pour la balise

Utilisation de loprateur pipe |

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

Prsentation Logique mtier

View Donnes Controller

View $scope Controller

Le Scope est un objet qui permet de partager les donnes

La vue ne doit rien savoir sur le contrleur

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

Le fichier usa.json est de la forme :

2 Rcuprer les donnes du serveur

Dans un module, on peut enregistrer des :

Un module peut dpendre dautres modules :

Les services sont instancis au moment de leur premire

View $scope Controller

Les routes sont gres par le module ngRoute qui

1. Notre module myApp dpend du module

Configuration des routes :

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

url construite pour

Das könnte Ihnen auch gefallen