SlideShare une entreprise Scribd logo
Introduction
Abdoulaye Dieng
Objectif général
Prendre en main l’un des frameworks MVC JavaScript les plus utilisés pour
développer rapidement et efficacement des applications Web
interactives sans trop solliciter le serveur et le réseau.
Objectifs spécifiques
• Définir le module principal et l’attacher à la vue
• Afficher des données sur la vue avec les expressions
• Gérer la logique de l’application avec les contrôleurs
• Fournir les contextes d’exécution de la logique avec les scopes
• Enrichir le HTML avec des directives prédéfinies
• Faciliter l’affichage des données avec les filtres
• Créer et valider des formulaires
• Organiser et partager le code métier avec les services
• Afficher des vues en fonction de l’URL via ngRoute et ngView
• Communiquer avec un serveur via $http
Sommaire
1) Présentation d’Angular JS
2) Inclusion de la librairie
3) Module principal
4) Expressions
5) Contrôleurs
6) Scope
7) Directives natives
8) Filtres
9) Formulaires
10) Services
11) Routage
12) Communiquer avec un serveur
Présentation
• Problématiques
– Comment bien utiliser le HTML dans une application Web ?
– Comment faciliter le codage d’une application JavaScript ?
• Solution : Framework JavaScript qui étend le HTML
• AngularJS est un framework JavaScript, créé en octobre 2010
par des développeurs de chez Google
• AngularJS repose sur cinq principes architecturaux :
– MVC : Modèle (données), Vue (pages HTML) et Contrôleur
(logique)
– Injection de dépendance : modularité d’une application
– Templating : définition déclarative de la vue
– Two-way data binding : quand le modèle change, la vue
reflète automatiquement le changement et vice et versa.
– Usage de composants natifs ou personnalisés
Inclusion de la librairie
• En local (dans le site)
– Télécharger la bibliothèque (fichier .js) à partir de
https://angularjs.org/
– Inclure la biblio dans toute page :
<script src="chemin/vers/angular.js"></script>
• En ligne via CDN (Content Delivery Networks) avec l’élément
script et l’attribut src valant par exmple l’URL :
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/
angular.min.js
tp1
Module principal
• Module principal = contient les composants (contrôleurs,
directives, filtres, services, …) d’une application
• Syntaxe de définition dans un fichier .js (app.js par exemple)
var nom = angular.module('nom', [eventuelles dependances]);
Ex : var myApp = angular.module('myApp', [ ]);
• Inclusion du module dans la vue (fichier .html)
– Ajouter l’attribut ng-app="nom" à l’élément html
Ex : <html ng-app="myApp">
– avec l’élément script et l’attribut src valant le chemin du
fichier app.js.
Ex : <script src="chemin/vers/app.js"></script>
L’inclusion doit se faire après celle d’angularJS
tp2
Expressions
• Expression = combinaison de littéraux, de variables et/ou
d'opérateurs
Exemples : 4; notes[2]; 'Bonjour '+nom
• Syntaxe :
{{ expression }}
• Objectif : insérer des données dynamiques dans le HTML
• Données affichées exactement à la position des accolades
• Remplacer les expressions complexes par des appels à des
fonctions d'un contrôleur
tp3
Contrôleurs
• Contrôleur = contient une partie de la logique de l’application
• Objectifs pour la zone (une partie de la page Web) gérée :
– initialiser le modèle (les données) ;
– exposer le modèle et les actions ;
– réagir aux changements du modèle et de la vue.
• Syntaxe de définition:
app.controller('NomCtrl', function(…){
// Données et actions du module
});
app représente le module auquel le contrôleur est rattaché
• Lier le contrôleur à la zone :
– <eltHTML ng-controller="NomCtrl">
– eltHTML délimite la zone (portée ou scope) du contrôleur
tp4
Scope
• Scope = objet JS référençant le modèle et les méthodes à
exposer à une portion de la vue
• Objectif : Fournir un contexte d’exécution d’un contrôleur ou
de certaines directives (ngRepeat, ngView, … )
• Syntaxe générale : Propriétaire des données et des actions du
contrôleur qui le reçoit en paramètre
app.controller('NomCtrl', function($scope){
$scope.prop1=…
$scope.prop2=function(){…}
});
• La racine de tous les scopes est le $rootScope instancié
lorsque AngularJS voit la directive ng-app
• L’objet $rootScope permet d'accéder à l'ensemble des
contextes présents dans la vuetp5
Directives natives
présentation
• Directive = marqueur dans la vue sous la forme d’élément
HTML, d’attribut ou de classe CSS.
• Objectif : étendre les capacités du langage HTML
• Syntaxe : ng-nom
• Directives de structure
ngApp, ngController, ngView.
• Autres directives :
ngInit, ngClick, ngRepeat, ngHide, ngShow, ngHref, ngSrc
(cf : https://docs.angularjs.org/api/ng/directive )
Directives natives
ngRepeat
• ngRepeat : répète le codage d’un élément HTML pour chaque
élément d’une collection
• Syntaxe :
<eltHTML ng-repeat="repeat_expression" >
…
</eltHTML>
• Avec repeat_expression pouvant être sous la forme :
– variable in dataset
Ex : membre in membres
– (key, value) in dataset
Ex : (prenom, note) in {'Ali':18, 'Nafi‘:15}
• dataset est une collection du scope
tp6
Directives natives
ngInit, ngClick, ngShow & ngHide
• ngInit : Initialiser des variables du contrôleur depuis le
template
• Syntaxe :
<eltHTML ng-init="variable=valeur" > … </eltHTML>
• ngClick : déclencher une action lorsque l'on click sur
l'élément
• Syntaxe :
<eltHTML ng-click="action ou fonction(…)" > …
</eltHTML>
• ngShow/ngHide : masquer ou afficher du contenu
• Syntaxe :
<eltHTML ng-show="expression_bool" > … </eltHTML>
• Exemple : bouton masqué après 10 clics
<button ng-init="count=0" ng-click="count = count + 1"Tp7&8
Directives natives
ngSrc & ngHref
• ngSrc : charger dynamiquement ( {{ … }} ) une image
• Syntaxe :
<img ng-src="{{PathToImage}}" />
• ngHref : reçoit une cible dynamique d’un lien
• Syntaxe :
<a ng-href="#/{{PathVariable}}">Take Me Somewhere</a>
• Exemple :
<a ng-href="#/user/{{user._id}}">View user</a>
Filtres
présentation
• Filtre = méthode qui facilite l’affichage des données
• Syntaxe (pipe « | ») :
{{ donnée | nomFiltre : param1 : param2 : … }}
• Quelques filtres natifs :
lowercase, uppercase, number, currency, date, orderBy,
limitTo, filter. (cf : https://docs.angularjs.org/api/ng/filter )
• Exemple :
$scope.etudiant={prenom:'Moussa', moyenne:14.876}
{{ etudiant.prenom | uppercase}} // MOUSSA
{{etudiant.moyenne | number : 2 }} // 14.88
{{['Ali', 'Moussa', 'Nafi', 'Soda']| filter:'i' }} // Ali, Nafi
• ll est possible d’enchainer les filtres
Ex : {{ etudiants | orderBy:'moyenne' | limitTo:5 }}Tp9
Filtres
filtre personnalisé
Syntaxe de définition
nomApp.filter('nomFiltre', function(){
return function(to_filter){
…
return filtered
}
});
Exemple
myApp.filter('reverse', function () {
return function (input) {
var out = '';
for (var i = 0; i < input.length; i++)
{
out = input.charAt(i) + out;
}
return out;
}Tp10
Formulaires
directives
• ngSubmit : lie une action à la soumission d’un formulaire
• ngDisabled : désactive un bouton
• ngModel : lie la valeur d’un champ (input, select, textarea) à
une donnée du scope
• ngValue : Lie la valeur d’une option sélectionnée ou d’un
bouton radio sélectionné à une donnée du scope
• ngTrueValue/ngFalseValue : lie une donnée du scope à la case
coché ou non
• Exemple
<form ng-submit="ajouter(newTaskName)" >
<input ng-model="newTaskName" >
<input type="submit" value="Ajouter">
</form>
Tp11
Formulaires
validation : concepts
• novalidate : attribut de form pour désactiver la validation
HTML5
• Propriétés de validation du formulaire ou d’un champ
– $valid : vraie si les règles de validation sont respectées
– $invalid : vraie si au moins une des règles est violée
– $pristine : vraie si l’élément n’a pas été modifié
– $dirty : vraie si l’élément a été modifié
– $error.<rule> : vraie si la règle de validation est violée
• Règles de validation : required, number, email, date, pattern,
max, min, ng-maxlength, ng-minlength, …
• Syntaxe d’accès
<nomFormulaire>.<propriété>
<nomFormulaire>.<nomChamp>.<propriété>
• Afficher les message d’erreur avec la directive ng-show
Formulaires
validation : exemple
<form name="myForm" novalidate>
<p>
Username : <input name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>
Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p> <input type="submit" ng-disabled="myForm.$dirty && myForm.$invalid"> </p>
</form>
Tp12
Services
présentation
• Service = objet qui incorpore des données et/ou du code métier
pour l'application.
• Objectifs :
– isoler certaines fonctionnalités réutilisables dans d’autres
composant de l'application par injection de dépendances
– Organiser et partager le code métier
• Un service est :
– lazy : instancié que lorsque l'application en a besoin
– singleton : instancié une seule fois et cette instance est
ensuite utilisée partout
• Quelques services natifs
– $http : crée et gère des requêtes AJAX
– $route: charge le contenu d’une vue en fonction d’une URL
Services
service personnalisé : méthode provider()
• Méthode générale qui contient une méthode $get() pour
retourner l’objet
• Syntaxe de définition
nomApp.provider('nomService', function(){
this.$get=function(){
return serviceObj;
}
});
• Le service peut être configuré avant l’instanciation comme suit
nomApp.config(function(nomServiceProvider){ … });
• Syntaxe d’utilisation
nomApp.controller(myCtrl, function($scope, nomService){
$scope.nomService=nomService;
});
Services
service personnalisé : exemple avec méthode provider()
myApp.provider('hello',function(){
this.name='Default‘;
this.$get=function(){
var name=this.name;
return {
sayHello : function() {return 'Hello '+ name +' !‘; }
}
};
this.setName=function(newName) {this.name=newName;}
});
myApp.config('helloProvider',function(helloProvider) {
helloProvider.setName('Abdoulaye');
});
myApp.controller('myCtrl',function($scope,hello) {
$scope.sayHello=hello.sayHello();
});
Services
service personnalisé : méthode factory()
• Raccourcie de provider sans méthode $get
• Retourne directement l’objet
• Syntaxe
app.factory('nomService',function(){
return serviceObj;
}) ;
• Exemple
myApp.factory('helloFactory',function(){
return {
name : 'Toto';
sayHello : function() {
return 'Hello ' + this.name + ' from factory'
}
}
});
Services
service personnalisé : méthode service()
• Raccourcie de provider qui crée directement l’objet dans la
fonction. Pas besoin de return
• Syntaxe
app.service('serviceName',function(){
this.prop = …;
this.methode = function(){…}
}) ;
• Exemple
myApp.service('helloService',function(){
this.name = 'Toto';
this.sayHello = function() {
return 'Hello ' + this.name + ' from service'
}
});
Tp13
Routage
principe
• Routage = faire correspondre une URL donnée à une page
précise.
• Éléments constructifs d’une page : un template, un contrôleur
et d’éventuelles variables (de session ou données par l'URL)
• ngRoute, module de base chargé du routage, est composé de :
– $route : service central du module qui lit l'URL, la parse et
la traite en fonction des informations de configuration.
– $routeProvider : provider qui définit la table de routage
lors de la configuration du service $route.
– $routeParams : service qui gère les paramètres passés via
l’URL
– ngView : directive qui permet d’insérer le template d’une
page dans le layout de l’application.
Routage
fonctionnement et installation de ngRoute
• SPA : Single-Page Application ou Application Web monopage
• Une seule page index.html contenant le layout de l’application
• Pb : comment modifier l’URL sans demander une autre page ?
• Sol : utiliser les ancres
• Format des URLs dans une application angularJS :
http://www.exemple.com/#/<nomAncre>
• Installer ngRoute en incluant, dans index.html, le script du
module angular-route.js (après celle d’AngularJS)
• Ajouter ngRoute dans les dépendances de l’application lors de
la définition de celle-ci :
var myApp = angular.module('myApp', ['ngRoute' ]);
Routage
directive ngView
• ngView précise l’emplacement d’un template dans le layout
• Exemple :
<html ng-app="butikApp">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<nav>
<a href="#/produits" >Nos produits</a>
<a href="#/contact" >Contactez-nous</a>
</nav>
<div ng-view> </div>
</body></html>
Routage
définition d’une table de routage
• La définition de la table de routage se fait par le provider
$routeProvider lors de la configuration du service $route
• Syntaxe basique de la définition
nomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when(path, route)
… // autant d’appels de when() que nécessaire
.otherwise({ redirectTo: '/pageParDefaut' })
}]);
• Syntaxe basique du path : '/nomAncre'
• Syntaxe basique de la route :
{
templateUrl : 'chemin/du/template.html',
controller : 'nomContrôleur'
}
Routage
exemple d’une définition d’une table de routage
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/produits',
{
templateUrl : 'partials/produits.html',
controller : 'produitsCtrl'
})
.when('/produit/:idProduit?',
{
templateUrl : 'partials/detailsProduit.html',
controller : 'detailsProduitCtrl'
})
.otherwise({ redirectTo: '/' })
}]);
Routage
path dynamique
• Path dynamique = path avec portion(s) variable(s)
• La syntaxe d’une portion variable est :nomVariable[?]
Toute variable suffixée du ? est facultative
• Syntaxe d’accès à la variable dans le contrôleur
nomApp.controller('nomCtrl', function($scope, $routeParams){
$scope.nomVariable = $routeParams.nomVariable;
});
• Exemple
En considérant la 2ème entrée de la table de routage de
l’exemple précédent et l'URL : http://butik.com/#/produit/2 :
myApp.controller('detailsProduitCtrl', function($scope,
$routeParams){
// idProduit vaut 1 si elle absente
$scope.idProduit = $routeParams.idProduit || 1;
});Tp14
Communiquer avec un serveur
présentation du service $http
• $http est un service qui facilite la communication avec les
serveurs HTTP distants via l'objet XMLHttpRequest
• $http(config ) : envoie une requête et retourne une promesse
• Principales champs de l’objet de configuration de la requête :
– method:'GET|POST|PUT|DELETE|etc.', méthode HTTP
– url:string, URL de la ressource demandée
– data:{string|Object} , données à envoyer via POST ou PUT
– params : object, paramètres à ajouter à l’URL
• Exemple
var promise = $http({ method:'POST', url: 'http://example.com',
data: { test: 'Bonjour le backend !' }
})
Communiquer avec un serveur
méthodes de l’objet promesse de $http
• Promesse = objet représentant le résultat futur d’une action
exécutée de manière asynchrone.
• Deux méthodes alternatives : success() et error()
• Chacune prend en paramètre une fonction de rappel
• Principaux paramètres des fonctions de rappel
– data {string|Object} : données reçues du serveur
– status {number} : code de statut HTTP de la réponse
• Exemple
$http({method:'GET', url: 'http://example.com'})
.success(function(data, status) {
$scope.status = status; $scope.data = data;
})
.error(function(data, status) {
$scope.data = data || "Request failed"; $scope.status = status;
});
Communiquer avec un serveur
méthodes raccourcies de $http
• $http.get(url, config)
• $http.post(url, data, config)
• $http.put(url, data, config)
• $http.delete(url, config)
Tp15
Documentation
• https://docs.angularjs.org/guide
• https://docs.angularjs.org/api
• http://blog.sodifrance.fr/angularjs-le-petit-framework-javascript-
encore-un-qui-monte-qui-monte/
• http://courseware.codeschool.com/shaping-up-with-angular-
js/Slides/level01-05.pdf
• https://github.com/makinacorpus/makina-
slides/blob/master/angular/human-coders/formation-angularjs-hc-
jour1.md
• http://www.dotnet-tricks.com/Tutorial/angularjs/V2YS090914-
Understanding-AngularJS-Factory,-Service-and-Provider.html
• http://www.tutoriel-angularjs.fr/tutoriel/2-utilisation-complete-d-
angularjs/1-le-routage
• http://tutorials.jenkov.com/angularjs/ajax.html

Contenu connexe

Tendances

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Ippon
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
Spring Boot RestApi.pptx
Spring Boot RestApi.pptxSpring Boot RestApi.pptx
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Eric Bourdet
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
Ines Ouaz
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?
Jérôme Tamborini
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
DNG Consulting
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)
ENSET, Université Hassan II Casablanca
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
Polymorphisme, interface et classe abstraite
Polymorphisme, interface et classe abstraitePolymorphisme, interface et classe abstraite
Polymorphisme, interface et classe abstraite
ECAM Brussels Engineering School
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
MOHAMMED MOURADI
 
Hibernate jpa
Hibernate jpaHibernate jpa
Hibernate jpa
Lhouceine OUHAMZA
 
Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
Antoine Rey
 

Tendances (20)

Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Spring Boot RestApi.pptx
Spring Boot RestApi.pptxSpring Boot RestApi.pptx
Spring Boot RestApi.pptx
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?Java 11 to 17 : What's new !?
Java 11 to 17 : What's new !?
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)Support programmation orientée aspect mohamed youssfi (aop)
Support programmation orientée aspect mohamed youssfi (aop)
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Polymorphisme, interface et classe abstraite
Polymorphisme, interface et classe abstraitePolymorphisme, interface et classe abstraite
Polymorphisme, interface et classe abstraite
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
Hibernate jpa
Hibernate jpaHibernate jpa
Hibernate jpa
 
Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
 

Similaire à Introduction à AngularJS

Angular
AngularAngular
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
Abdelhakim Bachar
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
kemenaran
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
Sylvain Wallez
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonyVincent Composieux
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
OualidBelbrik
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
VISEO
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
Jérémy Lecour
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Workshop - Lightning Web Components
Workshop - Lightning Web ComponentsWorkshop - Lightning Web Components
Workshop - Lightning Web Components
Bordeaux Salesforce Developer Group
 
Workshop Lightning Web Components
Workshop Lightning Web ComponentsWorkshop Lightning Web Components
Workshop Lightning Web Components
Bordeaux Salesforce Developer Group
 
Des principes de la démarche DevOps à sa mise en oeuvre
Des principes de la démarche DevOps à sa mise en oeuvreDes principes de la démarche DevOps à sa mise en oeuvre
Des principes de la démarche DevOps à sa mise en oeuvre
Stephane Manciot
 

Similaire à Introduction à AngularJS (20)

Angular
AngularAngular
Angular
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Workshop - Lightning Web Components
Workshop - Lightning Web ComponentsWorkshop - Lightning Web Components
Workshop - Lightning Web Components
 
Workshop Lightning Web Components
Workshop Lightning Web ComponentsWorkshop Lightning Web Components
Workshop Lightning Web Components
 
Des principes de la démarche DevOps à sa mise en oeuvre
Des principes de la démarche DevOps à sa mise en oeuvreDes principes de la démarche DevOps à sa mise en oeuvre
Des principes de la démarche DevOps à sa mise en oeuvre
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 

Plus de Abdoulaye Dieng

Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
Abdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
Abdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
Abdoulaye Dieng
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
Abdoulaye Dieng
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
Abdoulaye Dieng
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
Abdoulaye Dieng
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
Abdoulaye Dieng
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
Abdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
 

Introduction à AngularJS

  • 2. Objectif général Prendre en main l’un des frameworks MVC JavaScript les plus utilisés pour développer rapidement et efficacement des applications Web interactives sans trop solliciter le serveur et le réseau.
  • 3. Objectifs spécifiques • Définir le module principal et l’attacher à la vue • Afficher des données sur la vue avec les expressions • Gérer la logique de l’application avec les contrôleurs • Fournir les contextes d’exécution de la logique avec les scopes • Enrichir le HTML avec des directives prédéfinies • Faciliter l’affichage des données avec les filtres • Créer et valider des formulaires • Organiser et partager le code métier avec les services • Afficher des vues en fonction de l’URL via ngRoute et ngView • Communiquer avec un serveur via $http
  • 4. Sommaire 1) Présentation d’Angular JS 2) Inclusion de la librairie 3) Module principal 4) Expressions 5) Contrôleurs 6) Scope 7) Directives natives 8) Filtres 9) Formulaires 10) Services 11) Routage 12) Communiquer avec un serveur
  • 5. Présentation • Problématiques – Comment bien utiliser le HTML dans une application Web ? – Comment faciliter le codage d’une application JavaScript ? • Solution : Framework JavaScript qui étend le HTML • AngularJS est un framework JavaScript, créé en octobre 2010 par des développeurs de chez Google • AngularJS repose sur cinq principes architecturaux : – MVC : Modèle (données), Vue (pages HTML) et Contrôleur (logique) – Injection de dépendance : modularité d’une application – Templating : définition déclarative de la vue – Two-way data binding : quand le modèle change, la vue reflète automatiquement le changement et vice et versa. – Usage de composants natifs ou personnalisés
  • 6. Inclusion de la librairie • En local (dans le site) – Télécharger la bibliothèque (fichier .js) à partir de https://angularjs.org/ – Inclure la biblio dans toute page : <script src="chemin/vers/angular.js"></script> • En ligne via CDN (Content Delivery Networks) avec l’élément script et l’attribut src valant par exmple l’URL : https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/ angular.min.js tp1
  • 7. Module principal • Module principal = contient les composants (contrôleurs, directives, filtres, services, …) d’une application • Syntaxe de définition dans un fichier .js (app.js par exemple) var nom = angular.module('nom', [eventuelles dependances]); Ex : var myApp = angular.module('myApp', [ ]); • Inclusion du module dans la vue (fichier .html) – Ajouter l’attribut ng-app="nom" à l’élément html Ex : <html ng-app="myApp"> – avec l’élément script et l’attribut src valant le chemin du fichier app.js. Ex : <script src="chemin/vers/app.js"></script> L’inclusion doit se faire après celle d’angularJS tp2
  • 8. Expressions • Expression = combinaison de littéraux, de variables et/ou d'opérateurs Exemples : 4; notes[2]; 'Bonjour '+nom • Syntaxe : {{ expression }} • Objectif : insérer des données dynamiques dans le HTML • Données affichées exactement à la position des accolades • Remplacer les expressions complexes par des appels à des fonctions d'un contrôleur tp3
  • 9. Contrôleurs • Contrôleur = contient une partie de la logique de l’application • Objectifs pour la zone (une partie de la page Web) gérée : – initialiser le modèle (les données) ; – exposer le modèle et les actions ; – réagir aux changements du modèle et de la vue. • Syntaxe de définition: app.controller('NomCtrl', function(…){ // Données et actions du module }); app représente le module auquel le contrôleur est rattaché • Lier le contrôleur à la zone : – <eltHTML ng-controller="NomCtrl"> – eltHTML délimite la zone (portée ou scope) du contrôleur tp4
  • 10. Scope • Scope = objet JS référençant le modèle et les méthodes à exposer à une portion de la vue • Objectif : Fournir un contexte d’exécution d’un contrôleur ou de certaines directives (ngRepeat, ngView, … ) • Syntaxe générale : Propriétaire des données et des actions du contrôleur qui le reçoit en paramètre app.controller('NomCtrl', function($scope){ $scope.prop1=… $scope.prop2=function(){…} }); • La racine de tous les scopes est le $rootScope instancié lorsque AngularJS voit la directive ng-app • L’objet $rootScope permet d'accéder à l'ensemble des contextes présents dans la vuetp5
  • 11. Directives natives présentation • Directive = marqueur dans la vue sous la forme d’élément HTML, d’attribut ou de classe CSS. • Objectif : étendre les capacités du langage HTML • Syntaxe : ng-nom • Directives de structure ngApp, ngController, ngView. • Autres directives : ngInit, ngClick, ngRepeat, ngHide, ngShow, ngHref, ngSrc (cf : https://docs.angularjs.org/api/ng/directive )
  • 12. Directives natives ngRepeat • ngRepeat : répète le codage d’un élément HTML pour chaque élément d’une collection • Syntaxe : <eltHTML ng-repeat="repeat_expression" > … </eltHTML> • Avec repeat_expression pouvant être sous la forme : – variable in dataset Ex : membre in membres – (key, value) in dataset Ex : (prenom, note) in {'Ali':18, 'Nafi‘:15} • dataset est une collection du scope tp6
  • 13. Directives natives ngInit, ngClick, ngShow & ngHide • ngInit : Initialiser des variables du contrôleur depuis le template • Syntaxe : <eltHTML ng-init="variable=valeur" > … </eltHTML> • ngClick : déclencher une action lorsque l'on click sur l'élément • Syntaxe : <eltHTML ng-click="action ou fonction(…)" > … </eltHTML> • ngShow/ngHide : masquer ou afficher du contenu • Syntaxe : <eltHTML ng-show="expression_bool" > … </eltHTML> • Exemple : bouton masqué après 10 clics <button ng-init="count=0" ng-click="count = count + 1"Tp7&8
  • 14. Directives natives ngSrc & ngHref • ngSrc : charger dynamiquement ( {{ … }} ) une image • Syntaxe : <img ng-src="{{PathToImage}}" /> • ngHref : reçoit une cible dynamique d’un lien • Syntaxe : <a ng-href="#/{{PathVariable}}">Take Me Somewhere</a> • Exemple : <a ng-href="#/user/{{user._id}}">View user</a>
  • 15. Filtres présentation • Filtre = méthode qui facilite l’affichage des données • Syntaxe (pipe « | ») : {{ donnée | nomFiltre : param1 : param2 : … }} • Quelques filtres natifs : lowercase, uppercase, number, currency, date, orderBy, limitTo, filter. (cf : https://docs.angularjs.org/api/ng/filter ) • Exemple : $scope.etudiant={prenom:'Moussa', moyenne:14.876} {{ etudiant.prenom | uppercase}} // MOUSSA {{etudiant.moyenne | number : 2 }} // 14.88 {{['Ali', 'Moussa', 'Nafi', 'Soda']| filter:'i' }} // Ali, Nafi • ll est possible d’enchainer les filtres Ex : {{ etudiants | orderBy:'moyenne' | limitTo:5 }}Tp9
  • 16. Filtres filtre personnalisé Syntaxe de définition nomApp.filter('nomFiltre', function(){ return function(to_filter){ … return filtered } }); Exemple myApp.filter('reverse', function () { return function (input) { var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } return out; }Tp10
  • 17. Formulaires directives • ngSubmit : lie une action à la soumission d’un formulaire • ngDisabled : désactive un bouton • ngModel : lie la valeur d’un champ (input, select, textarea) à une donnée du scope • ngValue : Lie la valeur d’une option sélectionnée ou d’un bouton radio sélectionné à une donnée du scope • ngTrueValue/ngFalseValue : lie une donnée du scope à la case coché ou non • Exemple <form ng-submit="ajouter(newTaskName)" > <input ng-model="newTaskName" > <input type="submit" value="Ajouter"> </form> Tp11
  • 18. Formulaires validation : concepts • novalidate : attribut de form pour désactiver la validation HTML5 • Propriétés de validation du formulaire ou d’un champ – $valid : vraie si les règles de validation sont respectées – $invalid : vraie si au moins une des règles est violée – $pristine : vraie si l’élément n’a pas été modifié – $dirty : vraie si l’élément a été modifié – $error.<rule> : vraie si la règle de validation est violée • Règles de validation : required, number, email, date, pattern, max, min, ng-maxlength, ng-minlength, … • Syntaxe d’accès <nomFormulaire>.<propriété> <nomFormulaire>.<nomChamp>.<propriété> • Afficher les message d’erreur avec la directive ng-show
  • 19. Formulaires validation : exemple <form name="myForm" novalidate> <p> Username : <input name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span> </span> </p> <p> Email:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.$dirty && myForm.$invalid"> </p> </form> Tp12
  • 20. Services présentation • Service = objet qui incorpore des données et/ou du code métier pour l'application. • Objectifs : – isoler certaines fonctionnalités réutilisables dans d’autres composant de l'application par injection de dépendances – Organiser et partager le code métier • Un service est : – lazy : instancié que lorsque l'application en a besoin – singleton : instancié une seule fois et cette instance est ensuite utilisée partout • Quelques services natifs – $http : crée et gère des requêtes AJAX – $route: charge le contenu d’une vue en fonction d’une URL
  • 21. Services service personnalisé : méthode provider() • Méthode générale qui contient une méthode $get() pour retourner l’objet • Syntaxe de définition nomApp.provider('nomService', function(){ this.$get=function(){ return serviceObj; } }); • Le service peut être configuré avant l’instanciation comme suit nomApp.config(function(nomServiceProvider){ … }); • Syntaxe d’utilisation nomApp.controller(myCtrl, function($scope, nomService){ $scope.nomService=nomService; });
  • 22. Services service personnalisé : exemple avec méthode provider() myApp.provider('hello',function(){ this.name='Default‘; this.$get=function(){ var name=this.name; return { sayHello : function() {return 'Hello '+ name +' !‘; } } }; this.setName=function(newName) {this.name=newName;} }); myApp.config('helloProvider',function(helloProvider) { helloProvider.setName('Abdoulaye'); }); myApp.controller('myCtrl',function($scope,hello) { $scope.sayHello=hello.sayHello(); });
  • 23. Services service personnalisé : méthode factory() • Raccourcie de provider sans méthode $get • Retourne directement l’objet • Syntaxe app.factory('nomService',function(){ return serviceObj; }) ; • Exemple myApp.factory('helloFactory',function(){ return { name : 'Toto'; sayHello : function() { return 'Hello ' + this.name + ' from factory' } } });
  • 24. Services service personnalisé : méthode service() • Raccourcie de provider qui crée directement l’objet dans la fonction. Pas besoin de return • Syntaxe app.service('serviceName',function(){ this.prop = …; this.methode = function(){…} }) ; • Exemple myApp.service('helloService',function(){ this.name = 'Toto'; this.sayHello = function() { return 'Hello ' + this.name + ' from service' } }); Tp13
  • 25. Routage principe • Routage = faire correspondre une URL donnée à une page précise. • Éléments constructifs d’une page : un template, un contrôleur et d’éventuelles variables (de session ou données par l'URL) • ngRoute, module de base chargé du routage, est composé de : – $route : service central du module qui lit l'URL, la parse et la traite en fonction des informations de configuration. – $routeProvider : provider qui définit la table de routage lors de la configuration du service $route. – $routeParams : service qui gère les paramètres passés via l’URL – ngView : directive qui permet d’insérer le template d’une page dans le layout de l’application.
  • 26. Routage fonctionnement et installation de ngRoute • SPA : Single-Page Application ou Application Web monopage • Une seule page index.html contenant le layout de l’application • Pb : comment modifier l’URL sans demander une autre page ? • Sol : utiliser les ancres • Format des URLs dans une application angularJS : http://www.exemple.com/#/<nomAncre> • Installer ngRoute en incluant, dans index.html, le script du module angular-route.js (après celle d’AngularJS) • Ajouter ngRoute dans les dépendances de l’application lors de la définition de celle-ci : var myApp = angular.module('myApp', ['ngRoute' ]);
  • 27. Routage directive ngView • ngView précise l’emplacement d’un template dans le layout • Exemple : <html ng-app="butikApp"> <head> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script src="js/app.js"></script> </head> <body> <nav> <a href="#/produits" >Nos produits</a> <a href="#/contact" >Contactez-nous</a> </nav> <div ng-view> </div> </body></html>
  • 28. Routage définition d’une table de routage • La définition de la table de routage se fait par le provider $routeProvider lors de la configuration du service $route • Syntaxe basique de la définition nomApp.config(['$routeProvider', function($routeProvider) { $routeProvider .when(path, route) … // autant d’appels de when() que nécessaire .otherwise({ redirectTo: '/pageParDefaut' }) }]); • Syntaxe basique du path : '/nomAncre' • Syntaxe basique de la route : { templateUrl : 'chemin/du/template.html', controller : 'nomContrôleur' }
  • 29. Routage exemple d’une définition d’une table de routage myApp.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/produits', { templateUrl : 'partials/produits.html', controller : 'produitsCtrl' }) .when('/produit/:idProduit?', { templateUrl : 'partials/detailsProduit.html', controller : 'detailsProduitCtrl' }) .otherwise({ redirectTo: '/' }) }]);
  • 30. Routage path dynamique • Path dynamique = path avec portion(s) variable(s) • La syntaxe d’une portion variable est :nomVariable[?] Toute variable suffixée du ? est facultative • Syntaxe d’accès à la variable dans le contrôleur nomApp.controller('nomCtrl', function($scope, $routeParams){ $scope.nomVariable = $routeParams.nomVariable; }); • Exemple En considérant la 2ème entrée de la table de routage de l’exemple précédent et l'URL : http://butik.com/#/produit/2 : myApp.controller('detailsProduitCtrl', function($scope, $routeParams){ // idProduit vaut 1 si elle absente $scope.idProduit = $routeParams.idProduit || 1; });Tp14
  • 31. Communiquer avec un serveur présentation du service $http • $http est un service qui facilite la communication avec les serveurs HTTP distants via l'objet XMLHttpRequest • $http(config ) : envoie une requête et retourne une promesse • Principales champs de l’objet de configuration de la requête : – method:'GET|POST|PUT|DELETE|etc.', méthode HTTP – url:string, URL de la ressource demandée – data:{string|Object} , données à envoyer via POST ou PUT – params : object, paramètres à ajouter à l’URL • Exemple var promise = $http({ method:'POST', url: 'http://example.com', data: { test: 'Bonjour le backend !' } })
  • 32. Communiquer avec un serveur méthodes de l’objet promesse de $http • Promesse = objet représentant le résultat futur d’une action exécutée de manière asynchrone. • Deux méthodes alternatives : success() et error() • Chacune prend en paramètre une fonction de rappel • Principaux paramètres des fonctions de rappel – data {string|Object} : données reçues du serveur – status {number} : code de statut HTTP de la réponse • Exemple $http({method:'GET', url: 'http://example.com'}) .success(function(data, status) { $scope.status = status; $scope.data = data; }) .error(function(data, status) { $scope.data = data || "Request failed"; $scope.status = status; });
  • 33. Communiquer avec un serveur méthodes raccourcies de $http • $http.get(url, config) • $http.post(url, data, config) • $http.put(url, data, config) • $http.delete(url, config) Tp15
  • 34. Documentation • https://docs.angularjs.org/guide • https://docs.angularjs.org/api • http://blog.sodifrance.fr/angularjs-le-petit-framework-javascript- encore-un-qui-monte-qui-monte/ • http://courseware.codeschool.com/shaping-up-with-angular- js/Slides/level01-05.pdf • https://github.com/makinacorpus/makina- slides/blob/master/angular/human-coders/formation-angularjs-hc- jour1.md • http://www.dotnet-tricks.com/Tutorial/angularjs/V2YS090914- Understanding-AngularJS-Factory,-Service-and-Provider.html • http://www.tutoriel-angularjs.fr/tutoriel/2-utilisation-complete-d- angularjs/1-le-routage • http://tutorials.jenkov.com/angularjs/ajax.html