Angular JS - Paterne Gaye-Guingnido
description
Transcript of Angular JS - Paterne Gaye-Guingnido
Introduction à
2014-09-30 Introduction à AngularJS
Paterne Gaye@ptngaye
AngularJS : un framework web⦿Un framework web ⦿ Templating + Routage⦿ Dialogue avec les services du back-end⦿ MCV / MVVM
⦿Un framework web Javascript & front-end ⦿ AngularJS s’exécute dans le navigateur ⦿ Controlleurs + Model en Javascript
⦿Développement de SPA
2014-09-30 Introduction à AngularJS
Planning de la soirée
⦿Une première application AngularJS⦿Extension du langage HTML : les directives ⦿Vues, scopes et data-binding⦿Structure du code avec AngularJS⦿Appels asynchrones au back-end⦿ Injection de dépendances et tests⦿Points à surveiller
2014-09-30 Introduction à AngularJS
Préambule⦿Framework 100% Javascript vs Frameworks
PHP/Java/Flash/SilverLight.. ⦿ Un langage déjà présent dans “tous” les navigateurs● => Pas de plugin
⦿ Avec les frameworks “server side”, JSF, Struts etc., on fini toujours par rajouter du code Javascript
● =>Code fragmenté en plusieurs langages
⦿Navigateurs plus puissants que jamais●=>Décharger le serveur en exploitant la puissance du
client2014-07-10 Introduction à AngularJS
2014-07-10 Introduction à AngularJS
Une première application AngularJS
Une application AngularJS
2014-07-10 Introduction à AngularJS
Une application AngularJS
2014-07-10 Introduction à AngularJS
2014-07-10 Introduction à AngularJS
Extension du langage HTML
Qu’est-ce qu’une directive ?
⦿Une directive = Flag placé dans la vue
⦿Une directive = Elément | Attribut | commentaire HTML | Classe CSS
⦿Les navigateurs ne reconnaissent pas ces flags : c’est à AngularJS de les traiter⦿Une directive => un script JS indiquant le
traitement que AngularJS doit effectuer
2014-07-10 Introduction à AngularJS
Le compilateur HTML
2014-07-10 Introduction à AngularJS
Exemple de directive⦿Use case : ⦿ Un bouton de commande qui demande une
confirmation ⦿La vue<soat-confirmation-button action=”doVeryDangerousAction” message=”Opération est irréversible. Continuer ?” />⦿Le traitement associé ⦿ le script soat-confirmation-button.js
2014-07-10 Introduction à AngularJS
Exemple de directive
2014-07-10 Introduction à AngularJS
Directives : quand les utilser ?
⦿Comment savoir qu’on a besoin d’une directive ?
⦿Envie irrésistible de parsing du DOM⦿Un bloc de HTML qui se répète ⦿Composant de formulaire : calendrier, zone de
saisie ...⦿Attention à vérifier d’abord les directives
natives de Angular ou de la communauté
2014-07-10 Introduction à AngularJS
Vues, scopes et data-binding
2014-07-10 Introduction à AngularJS
Scope
⦿Scope = contexte d’évaluation des expressions AngularJS⦿ un scope = un objet Javascript
⦿Hiérachie de scope :⦿ $rootScope le scope de 1er niveau rattaché à ng-app⦿ Scope propres à ng-controller
2014-07-10 Introduction à AngularJS
La fonction $watch du scope
2014-07-10 Introduction à AngularJS
Contenu d’une vue AngularJS
⦿Le code HTML classique⦿Les directives⦿Les expressions AngularJS⦿ Instruction qui va etre interprété par AngularJS⦿A l’intérieur des doubles accolades {{}} ⦿comme valeurs des directives
⦿ Les filtres ⦿ Fonction qui transforme un objet en un autre
2014-07-10 Introduction à AngularJS
Binding
2014-07-10 Introduction à AngularJS
Structure d’une application AngularJS
2014-07-10 Introduction à AngularJS
Directives vs Controllers vs Services
⦿Directives⦿ Manipulation de DOM ⦿ Composants IHM re-utilisables
⦿Les services ⦿ Dialogue avec le back-end/appels HTTP⦿ Code métier⦿ Traitement partagés par plusieurs contrôleurs⦿ Services natifs préfixés ‘$’
2014-07-10 Introduction à AngularJS
Directives vs Controllers vs Services
⦿Controlleurs⦿ Gestion du scope attaché à une vue⦿ Gestion des actions utilisateurs
⦿Les filtres ⦿ Conversion d’un objet en un autre
⦿Exemple : le filtre currency
2014-07-10 Introduction à AngularJS
La définition des routes
2014-07-10 Introduction à AngularJS
Appels asynchrones au back-end
2014-07-10 Introduction à AngularJS
Exemples de use cases
2014-07-10 Introduction à AngularJS
⦿Cas #1 : agrégateur de news⦿Interroger Twitter, Google+ et Facebook ⦿Fusionner les trois flux afin d’avoir un flux unique
⦿Cas #2 : afficher le détail d’un client⦿Récupérer les infos usuelles dans SAP via un WS⦿Récupérer des infos additionnels d’une seconde
BD via un WS
Notion de callback
⦿Callback = fonction ⦿Etant donnée une fonction F, on peut rajouter à F un
argument supplémentaire qui est une fonction a exécuter en fin de traitement.
⦿Cas d’un enchaînement d’appels asynchrones: code illisible / enfer des callback
⦿Solution au callback-hell : les promesses⦿Une promesse = Résultat d’un traitement
asynchrone
2014-07-10 Introduction à AngularJS
Les promesses avec AngularJS
2014-07-10 Introduction à AngularJS
Injection de dépendances et tests
2014-07-10 Introduction à AngularJS
Injection des dépendances
2014-07-10 Introduction à AngularJS
Tests
2014-07-10 Introduction à AngularJS
⦿Tests unitaires⦿Injection de dépendances● On peut mocker facilement les différentes parties de
l’application● On peut donc tester unitairement
Tests : les outils
2014-07-10 Introduction à AngularJS
⦿Les tests s’exécutent sur la machine de dev⦿Outil pour exécuter le code Javascript coté serveur● => NodeJs ⦿Outil JUnit-like pour écrire les tests● => Mocha, Jasmine, QUnit⦿Runner pour exécuter les tests● => +1 Karma
⦿Les tests end-2end⦿Manipuler le browser via webdriver ● => Protractor⦿Alternatives à Selenium/Protractor ● => Casper par exemple
Points à surveiller
2014-09-30 Introduction à AngularJS
Attention !!!⦿Limites du binding : mémoire (2000 binding ?)⦿Pérénité du projet : Google⦿ Javascript indispensable⦿Non respect des bonnes pratiques⦿Un unique controller pour toute l’application⦿Code dupliqué dans les différents controllers⦿Manipulation directe du DOM en dehors des
directives⦿Code complexe dans les expressions et non dans le
controller
2014-09-30 Introduction à AngularJS
Outils et documentation
2014-07-10 Introduction à AngularJS
Outils ⦿IDE desktop
⦿IDE supportant Javascript ⦿+1 pour WebStorm (44 € par an)
⦿Les navigateurs ⦿Mode developpeur
⦿Cas du navigateur : Plugin Batarang ⦿Apparemment très utile
2014-09-30 Introduction à AngularJS
Documentation⦿Doc en ligne
⦿https://angularjs.org/⦿http://goo.gl/EPvajM le groupe Google+
francophone⦿http://www.frangular.com/
⦿Livres⦿“Devenez un ninja avec AngularJS” de Ninja Squad⦿+1 AngularJS de Brad Green et Shyam Seshadri
2014-09-30 Introduction à AngularJS
2014-09-30 Introduction à AngularJS