Introduction à AngularJS - Clermont'ech

Présentation pour Clermont'ech le 29/10/2013

Transcript

1. INTRODUCTION À ANGULARJS Éric Mas CLERMONT’ECH API HOUR #5 – 29/10/2013
2. « AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript! » Philosophie
3. Affichage d’une page
4. Affichage d’une page • Template : écrit en HTML • Controller : fonction javascript • Model : simple objet javascript
5. Affichage d'une page • Séparation des vues et de la logique de présentation : - La vue a accès aux données via le scope - Le contrôleur publie les données dans le scope • Le scope correspond au contexte d'exécution des expressions de la vue • Le template fonctionne sur les éléments du DOM • Mise à jour de la vue en cas de changement d'état du modèle : dirty checking
6. Organiser son code : les modules • Permet de structurer son application (par composant, par fonctionnalité, … ) • Regroupe des contrôleurs, des directives, des services, … • Une application peut se composer de plusieurs modules (avec un module principal)
7. Logique applicative : les services
8. HTML étendu : les directives • Extension du langage HTML • Définition ou redéfinition d'éléments ou d'attributs HTML
9. • Karma test runner : moteur d’exécution de tests • Angular-mocks : mocks de base pour faciliter l’écriture des tests • Angular-scenario : extension jasmine pour les tests d’interface utilisateur Tester son application
10. • Injection de dépendances • Directives fournies par AngularJS • $http et $resource • Filtres • Formulaires • Routage interne • Événements • Exceptions • ... Autres fonctionnalités
11. • Communauté AngularJS sur Google+ • Livre Mastering Web Application Development with AngularJS • FrAngular (frangular.com) • Wiki angular • Angular-app, ng-boilerplate (github.com/ngbp/ng-boilerplate) Aller plus loin
12. • Extension Chrome Batarang • Plugin angularjs pour sublimeText et WebStorm • Grunt Task Runner et Bower • Générateur Yeoman Outils pour les développeurs
13. http://builtwith.angularjs.org/ Qui utilise AngularJS ?
14. Questions ?