Téléchargé 532 fois
![+ Structure de données représentant une entité de l'application
+ Généralement transmise en JSON
LE MODÈLE
© SQLI Enterprise – SQLI GROUP | 2015 15
{
"users" : [{
"name": "Joe",
"id": "82047392"
},{
"name": "John",
"id": "65198013"
}]
}](https://image.slidesharecdn.com/angularjs-150423121421-conversion-gate02/75/AngularJS-15-2048.jpg)
Téléchargé parOuadie LAHDIOUI
AngularJS
Ce document fournit une formation sur AngularJS, couvrant des sujets tels que son architecture, son cycle de vie, et ses fonctionnalités principales comme le data-binding bidirectionnel, les directives et les filtres. Il aborde également les concepts de REST et les pratiques de développement d'applications web monopage. Enfin, le document présente des outils de débogage et met en avant des bonnes pratiques pour une utilisation efficace d'AngularJS.
AngularJS
- 1. Digital performance. ANGULARJS OUADIE LAHDIOUIOLAHDIOUI@SQLI.COM 23 AVRIL 2015
- 2. PROGRAMME DE LAFORMATION + Introduction + Cycle de vie + Principes généraux + Modèle, vues et contrôleurs + Les modules + Les directives et les filtres + Cycles de vie et scopes + Les services Angular + AJAX et REST + Aller plus loin + Démonstration SOMMAIRE © SQLI Enterprise – SQLI GROUP | 2015 2
- 3. + Architecture etfonctionnalités d'AngularJS + Qu'est-ce qu'une architecture orientée REST ? © SQLI Enterprise – SQLI GROUP | 2015 3 1INTRODUCTION
- 4. + Un frameworkJavaScript développé par une équipe Google + Permet d’implémenter côté front-end le pattern MVW (MV*) + Apporte aux applications web côté client les services traditionnellement apportés côté serveur : ARCHITECTURE ET FONCTIONNALITÉS D'ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 4 + lnjection de dépendances + MVC + Tests unitaires + Data-binding bidirectionnel + Routing + le templating
- 5. + Representational StateTransfer + REST n’est pas un protocole ou un format, c’est un style d’architecture qui repose sur le protocole HTTP + Principes : ARCHITECTURE ORIENTÉE REST © SQLI Enterprise – SQLI GROUP | 2015 5 + L’URI est important : connaître l’URI doit suffire pour nommer et identifier une ressource + HTTP fournit toutes les opérations nécessaires (HEAD, GET, POST, PUT, DELETE, OPTION) + Exemple d’URLs REST : + Créer un nouveu client : POST http://www.example.com/customers + Récupérer un client par identifiant : GET http://www.example.com/customers/33245 + Le même URL peut être utilisé avec les méthodes PUT et DELETE
- 6. ARCHITECTURE ORIENTÉE REST ©SQLI Enterprise – SQLI GROUP | 2015 6 + Hybris SAP + JAVA + HTML, AngularJS et CSS + Service Web REST
- 7. + Pattern MV* +Data-binding bi-directionnel + Avantages et inconvénients + Installation et découverte + Application « Hello world! » © SQLI Enterprise – SQLI GROUP | 2015 7 2PRINCIPES GÉNÉRAUX
- 8. + Model-View-Whatever (whateverworks for you) + Model: représente les données reçues du serveur + View: contient l’ensemble des vues affichées à l’utilisateur + Controller: contient la logique de l’application PATTERN MV* © SQLI Enterprise – SQLI GROUP | 2015 8 + MVC + MVVM
- 9. 1/2 DATA-BINDING BI-DIRECTIONNEL © SQLIEnterprise – SQLI GROUP | 2015 9 + Nombreux systèmes de templating : String statique + données = text ajouté au DOM par innerHTML + Tout changement sur une donnée nécessite un nouveau merge
- 10. 2/2 DATA-BINDING BI-DIRECTIONNEL © SQLIEnterprise – SQLI GROUP | 2015 10
- 11. AVANTAGES ET INCONVÉNIENTS ©SQLI Enterprise – SQLI GROUP | 2015 11 Avantages inconvénients Two-way data binding Connaissances javaScript indispensables Pattern du monde java Philosophie à appréhender Testabilité Composants graphiques externes Sponsorisé par Google
- 12. + Rendez-vous surwww.angularjs.org INSTALLATION ET DÉCOUVERTE © SQLI Enterprise – SQLI GROUP | 2015 12 angular.min.js
- 13. APPLICATION « HELLOWORLD! » © SQLI Enterprise – SQLI GROUP | 2015 13 + Directive démarquant une application AngularJS + Liaison du champs input au modèle+ Evaluation dynamique du modèle
- 14. + Le modèle +Les vues : templates + Les vues : expression + Les vues : directives + Les vues : filtres + Les contrôleurs : fonctionnement + Les contrôleurs : le $scope © SQLI Enterprise – SQLI GROUP | 2015 14 3MODÈLE, VUES ET CONTRÔLEURS
- 15. + Structure dedonnées représentant une entité de l'application + Généralement transmise en JSON LE MODÈLE © SQLI Enterprise – SQLI GROUP | 2015 15 { "users" : [{ "name": "Joe", "id": "82047392" },{ "name": "John", "id": "65198013" }] }
- 16. 1/4 + Ce quevoit l'utilisateur final + AngularJS, intègre nativement un moteur de template + Template : fichier HTML enrichi de certains attributs et balises propres à AngularJS LES VUES : TEMPLATES © SQLI Enterprise – SQLI GROUP | 2015 16
- 17. + Le langaged'expressions d'AngularJS est utiliser pour le binding + Des expressions valides : LES VUES : EXPRESSION © SQLI Enterprise – SQLI GROUP | 2015 17 + Le code mis dans les vues : Difficilement gérable Ne peut pas faire l'objet de tests unitaires 2/4
- 18. 3/4 + Une directive= Flag placé dans la vue + Les navigateurs ne reconnaissent pas ces flags, c’est à angularjs de les traiter + Balise ou attributs HTML, mais aussi classes CSS et commentaires HTML + Permet la création de composants réutilisables LES VUES : DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 18
- 19. + Filtre oumodifie l’affichage des données évaluées + Syntaxe inspirée de linux : caractère pie « | » + Filtres pré-inclus : currency, date, json, lowercase, number, limitTo… LES VUES : FILTRES © SQLI Enterprise – SQLI GROUP | 2015 19 4/4
- 20. + Le contrôleurest une fonction javascript liée à la vue par la directive ng-controller LES CONTRÔLEURS : FONCTIONNEMENT © SQLI Enterprise – SQLI GROUP | 2015 20 1/2
- 21. 2/2 + Un scope,c'est un domaine dans lequel des variables peuvent exister + La racine de tous les scopes est le $rootScope + Un objet javaScript + Créé par les directives ng-app, ng-controler et ng-repeat LES CONTRÔLEURS : LE $SCOPE © SQLI Enterprise – SQLI GROUP | 2015 21
- 22. + Création etconfiguration + Injection de dépendances © SQLI Enterprise – SQLI GROUP | 2015 22 4LES MODULES
- 23. + Permet d’encapsulerl’ensemble des éléments d’une application AngularJS + Un module permet de déclarer : directives, controleurs, filtres, constantes et services + Pour créer un module : CRÉATION ET CONFIGURATION © SQLI Enterprise – SQLI GROUP | 2015 23 + L’affectation d’une valeur à la directive ngApp implique le chargement du module déclaré avec cet identifiant + Créer le module demoApp
- 24. + Basée surle service $injector : + L’injection des services dans les contrôleurs : + Automatiquement par leur nom : INJECTION DE DÉPENDANCES © SQLI Enterprise – SQLI GROUP | 2015 24 + Explicite : + Bénéfices : + Découplage + Séparation des préoccupations
- 25. + Convention denommage, écriture normalisée + Types de directives + Créer ses propres directives + Créer ses propres filtres © SQLI Enterprise – SQLI GROUP | 2015 25 5 LES DIRECTIVES ET LES FILTRES
- 26. + AngularJS normalisele nom de la derictive en camelCase + une directive dont le nom est myProduct pourra être utilisée avec les différentes orthographes suivantes : CONVENTION DE NOMMAGE, ÉCRITURE NORMALISÉE © SQLI Enterprise – SQLI GROUP | 2015 26 + <my-product> + <data-my-product> + <x-my-product> + <my:product> + <my_product>
- 27. + Il existe4 types de directive : TYPES DE DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 27 + Directive de type Element : + Directive de type Attribut : + Directive de type Classe : + Directive de type Commentaire :
- 28. + Restrict : +E = Element + A = Attribute + C = Classe + M = Comment CRÉER SES PROPRES DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 28
- 29. CRÉER SES PROPRESFILTRES © SQLI Enterprise – SQLI GROUP | 2015 29 + Le nom du filtre + u2713 -> ✓ + u2718 -> ✘ + Création du filtre dans le module myApp : + L’application du filtrer sur le vue :
- 30. + Présentation dufonctionnement d’AngularJS + L’arbre des scopes © SQLI Enterprise – SQLI GROUP | 2015 30 6 CYCLES DE VIE ET SCOPES
- 31. + Le navigateurcharge le HTML et le transforme en DOM. + AngularJS attend l’évènement DOMContentLoaded, puis cherche une directive nommée ng-app qui définit les frontières de l’application. + Le service d’injection ($injector) est utilisé pour créer le $rootScope et le service $compile qui va compiler le DOM et le lier au $rootScope. + Les éléments dynamiques tels que les expressions sont alors rendus PRÉSENTATION DU FONCTIONNEMENT D’ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 31
- 32. + Les scopes: des objets qui servent de contexte d'évaluation des expressions contenues dans les templates L’ARBRE DES SCOPES © SQLI Enterprise – SQLI GROUP | 2015 32
- 33. + Les servicesnatifs + Les values et constant + Factory, Service et Provider © SQLI Enterprise – SQLI GROUP | 2015 33 7LES SERVICES ANGULARJS
- 34. LES SERVICES NATIFS ©SQLI Enterprise – SQLI GROUP | 2015 34 + Singletons nommés qui vont fournir une tâche précise + Ils peuvent être ensuite injectés dans un contrôleur ou un autre service + Chargés uniquement si besoin (lazy load) + AngularJS propose plusieurs méthodes pour créer un service : + module.provider() + module.service() + module.factory() + module.value() + module.constant() 1/2
- 35. + $document : LESSERVICES NATIFS © SQLI Enterprise – SQLI GROUP | 2015 35 + $location : + $log : 2/2
- 36. 1/3 + Techniquement, unservice, une factory ou un provider, ça sert à la même chose + Un service est une manière plus facile d’écrire une factory, qui est une manière plus simple d’écrire un provider + Provider : FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 36 + La manière la plus configurable de créer un service + Son rôle principl, c’est de créer et mettre à disposition un objet
- 37. 2/3 + Factory : FACTORY,SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 37 + Un raccourci pour écrire un provider + Pas de méthode $get à écrire
- 38. 3/3 + Service : FACTORY,SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 38 + La fonction va être utilisée directement (avec new) pour créer l’objet + Pas besoin de return, on attache tout à this + Le choix entre une factory et un service est vraiment une question de goût
- 39. 1/3 + Plus simplifiéeque les service et factory, car son second paramètre est directement l'instance du service à publier + il ne peut pas bénéficier d'injection d'autres services + AngularJS créé automatiquement un provider, mais qui ne fera que renvoyer l'instance préexistante du service LES VALUES ET CONSTANT © SQLI Enterprise – SQLI GROUP | 2015 39 + value:
- 40. 2/3 + Comme value,l'instance du service est un objet existant avant l'appel de la méthode constant + La méthode constant enregistre aussi cet objet comme étant un provider, sous le même nom que le service donc sans le suffixe 'Provider LES VALUES ET CONSTANT © SQLI Enterprise – SQLI GROUP | 2015 40 + Constant :
- 41. 3/3 FACTORY, SERVICE ETPROVIDER © SQLI Enterprise – SQLI GROUP | 2015 41
- 42. + Le service« $http » + Le service « $resource » + L’API de promise © SQLI Enterprise – SQLI GROUP | 2015 42 8AJAX ET REST
- 43. + un servicebas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP + $http.get : une requete HTTP de type GET + $http.head : une requete HTTP de type HEAD + $http.post : une requete HTTP de type POST + $http.put : une requete HTTP de type PUT + $http.jsonp : une requete HTTP avec JSONP comme format de retour LE SERVICE « $HTTP » © SQLI Enterprise – SQLI GROUP | 2015 43
- 44. + Un servicehaut niveau dédié à l’appel d’API REST + La ressource propose les méthodes get(), query(), save(), et delete() + $resource n’est pas inclus par défaut dans le framwork AngularJS LE SERVICE « $RESOURCE » © SQLI Enterprise – SQLI GROUP | 2015 44
- 45. + Une promise: un objet représentant le résultat futur d’une action exécutée de manière asynchrone + L’API de promise utilisée dans AngularJS par le biais de ses services : $http, $resource … L’API DE PROMISE © SQLI Enterprise – SQLI GROUP | 2015 45 + Les services $http et $resource exposent des fonctions supplémentaires plus pratiques :
- 46. + Quelques directivesAngularJS + SPA (Single Page Application) + Bonnes pratiques + Outils de debug : ng-instpector, Batarang © SQLI Enterprise – SQLI GROUP | 2015 46 9ALLER PLUS LOIN
- 47. BINDING + Ng-app + Ng-controller QUELQUESDIRECTIVES ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 47 + Ng-disabled + Ng-hide + Ng-show + Ng-repeat + Ng-switch + Ng-change + Ng-checked + Ng-click + Ng-href + Ng-selected + Ng-minlength + Ng-maxlength + Ng-required + Ng-list + Ng-option + Ng-submit TEMPLATE OPÉRATION FORMULAIREAPPLICATION + Ng-init + Ng-bind + Ng-model + Ng-style
- 48. + Une applicationweb accessible via une page web unique afin d’éviter le chargement d’une nouvelle page à chaque action demandée + Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page mais le contenu est modifié au fur et à mesure selon les requêtes + Configurer l’affichage des différentes pages : + Définir les routes : SPA (SINGLE PAGE APPLICATION) © SQLI Enterprise – SQLI GROUP | 2015 48 + Définir l’endroit où se “rendra” la vue :
- 49. + Avant d’utiliserune méthode fournie par jQuery, demandez vous toujours si AngularJS ne propose pas une solution. + Il faut préférer les directives AngularJS au directives HTML : BONNES PRATIQUES © SQLI Enterprise – SQLI GROUP | 2015 49 + Il faut toujours utiliser « track by » dans les directive ngRepeat : + Ne pas oublier le principe SRP au moment de création des services + Single Responsibility
- 50. BONNES PRATIQUES © SQLIEnterprise – SQLI GROUP | 2015 50 + Un unique contrôleur pour toute l’application + Code dupliqué dans les différents contrôleur + Manipulation directe du DOM en dehors des directives + Code complexe dans les expressions et non dans le contrôleur + Je met un gros conteneur avec tout dedans et tout le monde y accède + Non respect des bonnes pratiques :
- 51. + ng-inspector :un plugin chrome pour étudier les scopes AngularJS, il affiche les scopes sous forme arborescente. + Batarang : un plugin chrome pour faciliter le debuggage des applications. OUTILS DE DEBUG © SQLI Enterprise – SQLI GROUP | 2015 51 ng-inspector Batarang
- 52. + AngularJS &Accélérateur B2B Hybris (PowerTools) © SQLI Enterprise – SQLI GROUP | 2015 52 10DÉMONSTRATION
- 53. MERCI POUR VOTREATTENTION © SQLI Enterprise – SQLI GROUP | 2015 53