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 effica...
Objectifs spécifiques
• Définir le module principal et l’attacher à la vue
• Afficher des données sur la vue avec les expr...
Sommaire
1) Présentation d’Angular JS
2) Inclusion de la librairie
3) Module principal
4) Expressions
5) Contrôleurs
6) Sc...
Présentation
• Problématiques
– Comment bien utiliser le HTML dans une application Web ?
– Comment faciliter le codage d’u...
Inclusion de la librairie
• En local (dans le site)
– Télécharger la bibliothèque (fichier .js) à partir de
https://angula...
Module principal
• Module principal = contient les composants (contrôleurs,
directives, filtres, services, …) d’une applic...
Expressions
• Expression = combinaison de littéraux, de variables et/ou
d'opérateurs
Exemples : 4; notes[2]; 'Bonjour '+no...
Contrôleurs
• Contrôleur = contient une partie de la logique de l’application
• Objectifs pour la zone (une partie de la p...
Scope
• Scope = objet JS référençant le modèle et les méthodes à
exposer à une portion de la vue
• Objectif : Fournir un c...
Directives natives
présentation
• Directive = marqueur dans la vue sous la forme d’élément
HTML, d’attribut ou de classe C...
Directives natives
ngRepeat
• ngRepeat : répète le codage d’un élément HTML pour chaque
élément d’une collection
• Syntaxe...
Directives natives
ngInit, ngClick, ngShow & ngHide
• ngInit : Initialiser des variables du contrôleur depuis le
template
...
Directives natives
ngSrc & ngHref
• ngSrc : charger dynamiquement ( {{ … }} ) une image
• Syntaxe :
<img ng-src="{{PathToI...
Filtres
présentation
• Filtre = méthode qui facilite l’affichage des données
• Syntaxe (pipe « | ») :
{{ donnée | nomFiltr...
Filtres
filtre personnalisé
Syntaxe de définition
nomApp.filter('nomFiltre', function(){
return function(to_filter){
…
ret...
Formulaires
directives
• ngSubmit : lie une action à la soumission d’un formulaire
• ngDisabled : désactive un bouton
• ng...
Formulaires
validation : concepts
• novalidate : attribut de form pour désactiver la validation
HTML5
• Propriétés de vali...
Formulaires
validation : exemple
<form name="myForm" novalidate>
<p>
Username : <input name="user" ng-model="user" require...
Services
présentation
• Service = objet qui incorpore des données et/ou du code métier
pour l'application.
• Objectifs :
–...
Services
service personnalisé : méthode provider()
• Méthode générale qui contient une méthode $get() pour
retourner l’obj...
Services
service personnalisé : exemple avec méthode provider()
myApp.provider('hello',function(){
this.name='Default‘;
th...
Services
service personnalisé : méthode factory()
• Raccourcie de provider sans méthode $get
• Retourne directement l’obje...
Services
service personnalisé : méthode service()
• Raccourcie de provider qui crée directement l’objet dans la
fonction. ...
Routage
principe
• Routage = faire correspondre une URL donnée à une page
précise.
• Éléments constructifs d’une page : un...
Routage
fonctionnement et installation de ngRoute
• SPA : Single-Page Application ou Application Web monopage
• Une seule ...
Routage
directive ngView
• ngView précise l’emplacement d’un template dans le layout
• Exemple :
<html ng-app="butikApp">
...
Routage
définition d’une table de routage
• La définition de la table de routage se fait par le provider
$routeProvider lo...
Routage
exemple d’une définition d’une table de routage
myApp.config(['$routeProvider', function($routeProvider) {
$routeP...
Routage
path dynamique
• Path dynamique = path avec portion(s) variable(s)
• La syntaxe d’une portion variable est :nomVar...
Communiquer avec un serveur
présentation du service $http
• $http est un service qui facilite la communication avec les
se...
Communiquer avec un serveur
méthodes de l’objet promesse de $http
• Promesse = objet représentant le résultat futur d’une ...
Communiquer avec un serveur
méthodes raccourcies de $http
• $http.get(url, config)
• $http.post(url, data, config)
• $http...
Documentation
• https://docs.angularjs.org/guide
• https://docs.angularjs.org/api
• http://blog.sodifrance.fr/angularjs-le...
Prochain SlideShare
Chargement dans…5
×

Introduction à AngularJS

927 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
927
Sur SlideShare
0
Issues des intégrations
0
Intégrations
25
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à AngularJS

  1. 1. Introduction Abdoulaye Dieng
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×