Introduction à AngularJS

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 !' }
})

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;
});

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

Introduction à AngularJS

Contenu connexe

Tendances (20)

Similaire à Introduction à AngularJS (20)

Plus de Abdoulaye Dieng (20)

Introduction à AngularJS