Téléchargé 161 fois
Téléchargé parSOAT
Angular JS - Paterne Gaye-Guingnido
Le document présente une introduction à AngularJS, un framework web JavaScript qui facilite le développement d'applications SPA grâce à des concepts tels que le templating, le routage, et le data-binding. Il décrit également les directives, le scope, et l'injection de dépendances, tout en abordant des points importants à surveiller ainsi que des outils et ressources pour les développeurs. Enfin, des cas d'utilisation pratiques et des conseils pour les tests unitaires sont également mentionnés.
Contenu connexe
Similaire à Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
- 1. Introduction à PaterneGaye @ptngaye 2014-09-30 Introduction à AngularJS
- 2. AngularJS : unframework 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
- 3. Planning de lasoiré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
- 4. Préambule ⦿ Framework100% 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 client 2014-07-10 Introduction à AngularJS
- 5. Une première applicationAngularJS 2014-07-10 Introduction à AngularJS
- 6. Une application AngularJS 2014-07-10 Introduction à AngularJS
- 7. Une application AngularJS 2014-07-10 Introduction à AngularJS
- 8. Extension du langageHTML 2014-07-10 Introduction à AngularJS
- 9. 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
- 10. Le compilateur HTML 2014-07-10 Introduction à AngularJS
- 11. 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
- 12. Exemple de directive 2014-07-10 Introduction à AngularJS
- 13. Directives : quandles 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
- 14. Vues, scopes etdata-binding 2014-07-10 Introduction à AngularJS
- 15. 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
- 16. La fonction $watchdu scope 2014-07-10 Introduction à AngularJS
- 17. Contenu d’une vueAngularJS ⦿ 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
- 18. Binding 2014-07-10 Introductionà AngularJS
- 19. Structure d’une applicationAngularJS 2014-07-10 Introduction à AngularJS
- 20. Directives vs Controllersvs 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
- 21. Directives vs Controllersvs 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
- 22. La définition desroutes 2014-07-10 Introduction à AngularJS
- 23. Appels asynchrones auback-end 2014-07-10 Introduction à AngularJS
- 24. Exemples de usecases ⦿ 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 2014-07-10 Introduction à AngularJS
- 25. 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
- 26. Les promesses avecAngularJS 2014-07-10 Introduction à AngularJS
- 27. Injection de dépendanceset tests 2014-07-10 Introduction à AngularJS
- 28. Injection des dépendances 2014-07-10 Introduction à AngularJS
- 29. Tests ⦿ Testsunitaires ⦿Injection de dépendances ● On peut mocker facilement les différentes parties de l’application ● On peut donc tester unitairement 2014-07-10 Introduction à AngularJS
- 30. Tests : lesoutils ⦿ 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 2014-07-10 Introduction à AngularJS
- 31. Points à surveiller 2014-09-30 Introduction à AngularJS
- 32. 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
- 33. Outils et documentation 2014-07-10 Introduction à AngularJS
- 34. 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
- 35. Documentation ⦿Doc enligne ⦿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
- 36. 2014-09-30 Introduction àAngularJS