Download - 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


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


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


Une première application AngularJS

Une application 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


Le compilateur HTML


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


Exemple de directive


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é


Vues, scopes et data-binding


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


La fonction $watch du scope


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


Binding


Structure d’une application 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 ‘$’


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


La définition des routes


Appels asynchrones au back-end


Exemples de use cases


⦿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


Les promesses avec AngularJS


Injection de dépendances et tests


Injection des dépendances


Tests


⦿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


⦿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


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


Outils et documentation


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


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


http://goo.gl/EPvajM