INTRODUCTION À ANGULARJS Éric Mas CLERMONT’ECH API HOUR #5 – 29/10/2013 

« 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 

Affichage d’une page 

Affichage d’une page ● Template : écrit en HTML ● Controller : fonction javascript ● Model : simple objet javascript 

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 

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) 

Logique applicative : les services 

HTML étendu : les directives ● Extension du langage HTML ● Définition ou redéfinition d'éléments ou d'attributs HTML 

● 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 

● Injection de dépendances ● Directives fournies par AngularJS ● $http et $resource ● Filtres ● Formulaires ● Routage interne ● Événements ● Exceptions ● ... Autres fonctionnalités 

● 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 

● Extension Chrome Batarang ● Plugin angularjs pour sublimeText et WebStorm ● Grunt Task Runner et Bower ● Générateur Yeoman Outils pour les développeurs 

http://builtwith.angularjs.org/ Qui utilise AngularJS ? 

Questions ?