AngularJS

3 477 vues

Publié le

AngularJS est un framework Javascript en plein essor, visant à structurer et simplifier le développement d'applications riches côté client.

Développé par Google sous licence open-source, il intègre nativement l'ensemble des fonctionnalités habituellement obtenues par assemblage de librairies spécialisées : routage, templates, bindings, appels REST... Sa robustesse et sa polyvalence en font aujourd'hui un élément incontournable de toutes les applications web orientées REST !

En effet, cette formation vous apportera la maîtrise des fonctionnalités clés du framework : filtres, contrôleurs, templates, REST... Vous verrez également son intégration dans la plateforme PowerTools (Accélérateur B2B Hybris).

Publié dans : Logiciels
0 commentaire
16 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 477
Sur SlideShare
0
Issues des intégrations
0
Intégrations
422
Actions
Partages
0
Téléchargements
354
Commentaires
0
J’aime
16
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

AngularJS

  1. 1. Digital performance. ANGULARJS OUADIE LAHDIOUI OLAHDIOUI@SQLI.COM 23 AVRIL 2015
  2. 2. PROGRAMME DE LA FORMATION + 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. 3. + Architecture et fonctionnalités d'AngularJS + Qu'est-ce qu'une architecture orientée REST ? © SQLI Enterprise – SQLI GROUP | 2015 3 1INTRODUCTION
  4. 4. + Un framework JavaScript 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. 5. + Representational State Transfer + 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. 6. ARCHITECTURE ORIENTÉE REST © SQLI Enterprise – SQLI GROUP | 2015 6 + Hybris SAP + JAVA  + HTML, AngularJS et CSS + Service Web REST
  7. 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. 8. + Model-View-Whatever (whatever works 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. 9. 1/2 DATA-BINDING BI-DIRECTIONNEL © SQLI Enterprise – 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. 10. 2/2 DATA-BINDING BI-DIRECTIONNEL © SQLI Enterprise – SQLI GROUP | 2015 10
  11. 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. 12. + Rendez-vous sur www.angularjs.org INSTALLATION ET DÉCOUVERTE © SQLI Enterprise – SQLI GROUP | 2015 12 angular.min.js
  13. 13. APPLICATION « HELLO WORLD! » © 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. 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. 15. + 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" }] }
  16. 16. 1/4 + Ce que voit 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. 17. + Le langage d'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. 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. 19. + Filtre ou modifie 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. 20. + Le contrôleur est 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. 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. 22. + Création et configuration + Injection de dépendances © SQLI Enterprise – SQLI GROUP | 2015 22 4LES MODULES
  23. 23. + Permet d’encapsuler l’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. 24. + Basée sur le 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. 25. + Convention de nommage, é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. 26. + AngularJS normalise le 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. 27. + Il existe 4 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. 28. + Restrict : + E = Element + A = Attribute + C = Classe + M = Comment CRÉER SES PROPRES DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 28
  29. 29. CRÉER SES PROPRES FILTRES © 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. 30. + Présentation du fonctionnement d’AngularJS + L’arbre des scopes © SQLI Enterprise – SQLI GROUP | 2015 30 6 CYCLES DE VIE ET SCOPES
  31. 31. + Le navigateur charge 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. 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. 33. + Les services natifs + Les values et constant + Factory, Service et Provider © SQLI Enterprise – SQLI GROUP | 2015 33 7LES SERVICES ANGULARJS
  34. 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. 35. + $document : LES SERVICES NATIFS © SQLI Enterprise – SQLI GROUP | 2015 35 + $location : + $log : 2/2
  36. 36. 1/3 + Techniquement, un service, 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. 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. 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. 39. 1/3 + Plus simplifiée que 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. 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. 41. 3/3 FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 41
  42. 42. + Le service « $http » + Le service « $resource » + L’API de promise © SQLI Enterprise – SQLI GROUP | 2015 42 8AJAX ET REST
  43. 43. + un service bas 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. 44. + Un service haut 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. 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. 46. + Quelques directives AngularJS + SPA (Single Page Application) + Bonnes pratiques + Outils de debug : ng-instpector, Batarang © SQLI Enterprise – SQLI GROUP | 2015 46 9ALLER PLUS LOIN
  47. 47. BINDING + Ng-app + Ng-controller QUELQUES DIRECTIVES 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. 48. + Une application web 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. 49. + Avant d’utiliser une 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. 50. BONNES PRATIQUES © SQLI Enterprise – 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. 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. 52. + AngularJS & Accélérateur B2B Hybris (PowerTools) © SQLI Enterprise – SQLI GROUP | 2015 52 10DÉMONSTRATION
  53. 53. MERCI POUR VOTRE ATTENTION © SQLI Enterprise – SQLI GROUP | 2015 53

×