AngularJS. AngularJS 13/05/2015

Transcription

1 AngularJS AngularJSest né en 2009 dans les locaux de Google. Angular est construit autour des concepts clés suivants: Architecture MVC (Modèle-Vue-Contrôleur) ou MVW (Model-View-Whatever) 2 WayData Binding Injection de Dépendances Manipulation du DOM au moyen de directives SPA(Single Page Application) Petit détail: pourquoi Angular? à cause des "angles brackets" qui entourent les balises HTML. AngularJS Précision préliminaire pour les développeurs JavaScript "oldschool": avec Angular, il n'y a, en général, pas de manipulation directe du DOM, si, si!! Avec jquery, Prototype et autres librairies JavaScript, on doit presque toujours sélectionner un élément (via l'api DOM) pour pouvoir l'utiliser. Avec AngularJSon peut ajouter, supprimer et modifier la page HTML sans faire aucun appel au DOM: plus besoin de $(), getelementbyid(),... Note: les accros à jquery ont toutefois accès, depuis Angular, à jqlite(un jquery Lite) mais c'est souvent déconseillé. 1

2 SPA: Single Page Application AngularJSpermet de développer des applications Web de type SPA. Une SPA(Single Page Application) est une application web accessible via une page web unique. Le but est d éviter le chargement d une nouvelle page à chaque action demandée et d'améliorer ainsi l expérience utilisateur (meilleure fluidité). SPA: Single Page Application La différence entre une SPA et un site web classique réside dans leur structure et dans la relation qu'ils établissent entre le navigateur et le serveur: Une SPA est donc composée d une seule page. Le rôle du browser (front-end) est beaucoup plus important : toute la logique applicative y est déportée. Le serveur (back-end) est "seulement"responsable de la fourniture des ressources àl application et surtout de l'exposition des données. 2

3 SPA: pourquoi on en parle? Les frameworksjs comme AngularJSet EmberJS participent à la popularité des SPA. Les SPA s'appuyant sur de tels frameworksont en général comme avantage d'être: testables (unitairement et fonctionnellement) fluides (pas de rechargement d url etc) bien organisées maintenables et évolutives... SPA: les pièges à éviter Néanmoins il y a plusieurs points à prendre en compte lorsqu on réalise une SPA pour éviter des problèmes potentiels: 1. La taille du DOM (trop gros il peut ralentir fortement le browser). 2. Les traitements (trop lourds il peuvent ralentir le browser). 3. L empreinte mémoire de l'application(qui doit être la plus réduite possible). Solutions: 1. Essayer de ne charger que les éléments nécessaires à l utilisateur du site et décharger les autres. 2. Ecrire et tester correctement son code. 3. Utiliser une solution basée sur un "virtual DOM" (React.JS est un framework JavaScript pionnier en la matière). 3

4 SPA: les pièges à éviter Autre sujet qui peut être un problème avec les SPA: le référencement (problématique du "SEO" - Search Engine Optimization). Les moteurs de recherche ont du mal à "crawler" des sites dynamiquement gérés par du JavaScript. Des solutions existent pour fournir spécifiquement à Google une version correspondante aux "snapshots" HTML générés par les applications SPA. Ces solutions sont accessibles soit en mode SAAS (payantes et hébergées) soit en mode Open- Source à héberger soi-même. Les modules Les modules sont les éléments de plus haut niveau dans une application AngularJS, ilsencapsulent l ensemble des éléments d une application AngularJS: vue, contrôleur, services, Une application AngularJSest souvent composée d'un seul module, mais il est tout à fait possible de diviser une application en plusieurs modules (un par fonctionnalité par exemple), le but étant, si possible, de réutiliser un même module dans plusieurs applications. 4

5 Les modules Pour créer un module, on utilise la méthode module() de l objet angular. var myapp = angular.module("exampleapp", []); Cette méthode prend en paramètre le nom de module suivi d un tableau correspondant aux dépendances du module et d'une fonction ou d'un tableau utilisé pour la configuration du module. Les modules L objet correspondant au module expose plusieurs méthodes et propriétés qui servent à construire les différents éléments d'un module. animation(name, factory): pour créer des animations. config(callback): pour enregistrer une fonction utilisée pour configurer le module. constant(key, value): pour créer un service retournant une constante. controller(name, constructor): pour créer un contrôleur. directive(name, factory): pour créer une directive (pour étendre le HTML). 5

6 Les modules factory(name, provider): pour créer un service. filter(name, factory): pour créer un filtre. provider(name, type): pour créer un service. name: le nom du module. run(callback):pour enregistrer une fonction à invoquer lorsque AngularJS aura chargé et configuré tous les modules. service(name, constructor) : pour créer un service. value(name, value): pour définir un service retournant une valeur constante. Les modules Une fois défini un module, son nom doit être associé au contenu HTML par l'attribut ng-app(souvent associé à l'élément racine <html>): <html ng-app= "exampleapp" >. </html> 6

7 Les contrôleurs Les contrôleurs permettent de gérer le comportement d un bout de code HTML. Par exemple ils peuvent servir à gérer la soumission d un formulaire ou encore àtrier les résultats d un tableau de données. Il suffit de définir le contrôleur comme une fonction JavaScript et de l'associer à un élément HTML. Les contrôleurs <div ng-controller="listctrl"> </div> <span>{{items.length}} items</span> <ul> </ul> <li ng-repeat="item in items">{{item}}</li> <form ng-submit="additem()"> <input type="text" ng-model="itemtext" size="30" placeholder="add new item"> <input class="bt-sub" type="submit" value="add"> </form> 7

8 Les contrôleurs Un contrôleur possède automatiquement un scope. Le scope permet d associer des données au contrôleur qui seront automatiquement mises à jour dans la vue (et vice-versa) (principe du 2-way data-binding). function ListCtrl($scope) { } // Liste d'items par défaut $scope.items = ["hello", "world"]; // Ajout d un item (associé au submit) $scope.additem = function() { }; $scope.items.push($scope.itemtext); $scope.itemtext = ''; Les contrôleurs On peut également injecter des dépendances dans un contrôleur, peu importe l ordre(par exemple des services comme $http): function ListCtrl($http, $scope) { $scope.items = ["hello", "world"]; $scope.additem = function() { $scope.items.push($scope.itemtext); // Utilisation du service $http injecté dans le contrôleur $http.post('/items', $scope.itemtext); $scope.itemtext = ''; }; } 8

9 La vue La vueest ce que voit l'utilisateur final. La vue est générée à partir d'un template. Le templateest le fichier HTML enrichi de certains attributs et balises propres à AngularJS(les directives). Celles-ci permettent d'utiliser des raccourcis syntaxiques pour afficher des variables, faire des boucles, des tests et bien d'autres choses encore. Pas besoin d'un "templateengine" externe (comme UnderscoreJSou Handlerbars) avec Angular: celui-ci intègre nativement un moteur de template. Le modèle Le modèle est contenu dans l'ensemble des scopes de la page. Un scope est un objet dans lequel des propriétés (variables, méthodes) peuvent exister. Il existe une hiérarchie arborescente de scopes. La racine de tous les scopes est le $rootscopeinstancié lorsqu'angularjsvoit la directive ng-app (souvent associée à la balise <html>). Il y a ensuite un scope par contrôleur (directive ngcontroller). Certaines directives créent leur propre scope (ex: ngrepeat). En général, les scopes sont créés et injectés automatiquement par AngularJS. 9

10 Le "2-Way data-binding" AngularJS(mais aussi KnockoutJS ou EmberJS) implémente le Two-WayData Binding (ou liaison bilatérale des données): les données du modèle et de la vue sont liées entre elles et dans les deux sens. Au chargement de la page, AngularJScrée le modèle et initialise les variables des scopes selon ce qui est déclaré dans le contrôleur et le template. Après le modèle, AngularJS génère la vue. Ce concept est au centre du framework, il simplifie grandement le développement: les variables de la vue et du modèle sont constamment synchronisées. Le "2-Way data-binding" Le 2-Way Data Binding permet, dans beaucoup de situations, d'éviter la manipulation du DOM. 10

11 L'injection de dépendances Le système d'injection de Dépendances (DI) a pour rôle de créer un composant, de résoudre ses dépendances et de passer sa référence (l'injecter) lorsque c'est nécessaire à un autre composant. Par exemple, souvent, un contrôleur demandera au DI l'objet $scope. Celui-ci sera injecté et utilisable à l'intérieur du contrôleur, avec ses propriétés et méthodes. On ajoute ainsi des fonctionnalités à un contrôleur (ou d'autres composants) via des services ou modules injectés. Le DI nous assure qu'il n'y aura pas de conflits entre les différentes parties du code, même si elles utilisent les mêmes services. L'injection de dépendances Le DI impose une certaine syntaxe pour identifier le composant à injecter. angular.module('app', []).controller('todocontroller', ['$scope', function ($scope) { $scope.todos = [ { title: 'Learn JavaScript', completed: true }, { title: 'Learn Angular.js', completed: false }, { title: 'Learn JS design patterns', completed: false }, { title: 'Build Node.js backend', completed: false }, ]; }]); 11

12 Les directives Les directivessont un concept très important en AngularJS: elles permettent d étendre les capacités du langage HTML, de lui apporter de nouvelles fonctionnalités. Les directives sont utilisées dans le template HTML. <div ng-show="user.islogged">bonjour {{user.name}} </div> Directives, HTML et CSS standard, expressions et filtres forment la "Vue". Les directives Angularpropose un certain nombre de directives prédéfinies. Certaines sont structurantes: nb-app: création d'une application Angular nb-controller: association d'un contrôleur à une vue nb-view: association d'une vue à une route D'autres directives concernent les liaisons et les templates: ng-bind: création d'un data-binding uni-directionnel ng-model: création d'un data-binding bi-directionnel ng-repeat: génération répétitive d'éléments ng-include: chargement une vue partielle ng-switch: affichage, sous condition, d'éléments 12

13 Les directives Certaines directives sont liées aux éléments et événements DOM: ng-show, ng-hide: masquer/faire apparaitre un élément ng-if: supprimer, sous condition, un élément du DOM ng-class: gérer la classe CSS d'un élément ng-style: gérer le style CSS d'un élément ng-class-odd, ng-class-event: changer la classe CSS d'un élément généré par un repeat selon sa position ng-click, ng-focus, ng-mouseover,...: associer une action à un événement particulier ng-checked, ng-disabled, ng-readonly,... : gérer les propriétés booléennes de certains éléments Les directives Enfin certaines directives sont liées aux formulaires: ng-change: expression évaluée quand le contenu d'un élément change ng-minlength, ng-maxlength, ng-required,...: utilisés pour la validation du formulaire. En plus des directives AngularJsprédéfinies, on peut créer ses propres directives. On bénéficie ainsi d'un élément réutilisable: une sorte de bout de code dynamique. Toutefois, la création d'une directive est sans doute la tâche la plus complexe à réaliser dans AngularJS. 13

14 Les expressions On utilise les expressions AngularJSdans les vues: directement dans le code HTML ou associées à des directives. Elles sont "parsées" et exécutées par AngularJS. Elles acceptent un sous-ensemble des opérateurs et des mots-clefs de JavaScript. Règle: ne pas mettre de code dans les vues. Le code mis dans les vues ne peut pas faire l'objet de tests unitaires, et il est plus difficilement gérable. Il faut donc se limiter à des expressions "simples": binding sur des propriétés du scope, appels de fonctions du scope, comparaisons simples... Les expressions Il vaut mieux remplacer les expressions complexes par des appels à des fonctions qu'un contrôleur publie dans son scope. Mots-clefs et opérateurs disponibles: true, false, undefined, null +,-,*,/,%,(),==,!=,<,>,<=,>=,!,&&,,===,!==,= Tous les identifiants utilisés dans des expressions sont recherchés comme des propriétés du scope. 14

15 Les expressions <div ng-init="qte=12;prix=5.2"> <p>total: {{ qte*prix }}</p> </div> <div ng-init="personne={nom:'martin',prenom:'eric'}"> <p>prenom: {{ personne.prenom}}</p> </div> Attention: utiliser un objet nul ou non défini dans une expression ne provoque aucune erreur pour ne pas gêner le client, c'est donc difficile à détecter! Les expressions Pour ajouter une fonctionnalité utilisable dans les expressions on peut: 1. publier une fonction dans un scope: pour un usage bien localisé 2. créer un filtre: pour un besoin général (disponible dans toutes les expressions de toutes les vues). Le service $parsepermet de compiler une expression AngularJS en une fonction qu'on pourra exécuter en lui passant un scope. 15

16 Les filtres Les filtres permettent de faciliter l affichage des données. Ils utilisent la syntaxe des pipes: ' ' Exemples de filtres de formatages pour les dates et nombres: today is {{date date:'dd/mm/yyyy'}} price is {{number currency}} Exemple de filtre pour les chaînes: {{astring uppercase}} Il est possible d enchainer les filtres. Les filtres Certains filtres vont modifier le DOM: <a href="" ng-click="predicate='age'; reverse=false">name</a>... <tr ng-repeat="nom in noms orderby:predicate:reverse"> Le filtre filterpermet de réduire un tableau de données: Any: <input ng-model="search.$"> <br> Name only <input ng-model="search.name"><br> Phone only <input ng-model="search.phone"><br> <tr ng-repeat="friend in friends filter:search"> On peut créer ses propres filtres. La technique est similaire aux directives, contrôleurs et services. 16

17 Les services Service, factoryou provider, dans AngularJS, servent à la même chose: un service est juste une manière plus facile d écrire une factory, qui est juste une manière plus simple d écrire un provider. Les 3 servent à créer un objet JavaScript ordinaire. Un service permet d'isoler certaines fonctionnalités, que l'on pourra utiliser dans le reste de l'application par injection de dépendances. Dans un service, on met du code métier et/ou des données de l application, groupés par thème. Les services Exemple de service: monapp.service('profile', function() { this.name = "Anonymous"; this.id = null; this.login = function(){ // code pour se connecter } this.logout = function(){ // code pour se déconnecter } }); 17

18 Les services Le service peut être ensuite injecté dans un contrôleur ou dans un autre service. mymonappapp.controller('uncontrolleur', function($scope, profile) { }); Les services AngularJS sont : $scope.profile = profile; 1. "Lazilyinstantiated", c est-à-dire instanciés uniquement quand on en a besoin. 2. Des singletons. Les services On met dans les services, tout le code qui n est pas lié à la navigation ou à la manipulation de DOM. Bref, lié à la logique de l'application et non lié au Web. Généralement, ces services sont utilisés : 1. Par un contrôleur (et aussi par les vues du fait du data-binding). 2. Par une directive. 3. Par d autres services. 18

19 Services proposés par défaut Voici quelques exemples de services AngularJS $animate: anime une transition de contenu. $document: fournitun objet jqliteencapsulantl objetdom window.document $exceptionhandler: aide à la gestion des exceptions. $filter: permetl'accésaux filtres. $http: crée et gère des requêtes AJAX. $injector: crée des instances de composants AngularJS. $interval: fournit un wrapper sur la fonction window.setinterval. $location: fournit un wrapper sur l objet location du browser. Services proposés par défaut $log: fournit un wrappersur l objet console. $q: permet de créer explicitement des objets promises. $resource: facilite l usage des services RESTful. $rootelement: fournit l'accès à la racine du DOM. $rootscope: fournit l'accès au scope de plus haut niveau. $route: permet de changer le contenu d une vue en fonction d une URL. $routeparams: permet de traiter les URL de routage. $swipe: permet de reconnaitre la gestuelle "swipe". $timeout: fournit un wrappersur la fonction window.setitimeout. $window: fournit une référence sur l objet window. 19

20 Validation des forms AngularJSprend en charge les formulaires et leur validation. Les règles de validation supportées de base sont basées sur le type du champ input, sa taille mini, maxi, son contenu (pattern), sa présence, Il est également possible d ajouter ses propres règles de validation en créant des directives. Validation des forms AngularJSpositionne plusieurs propriétés au niveau du formulaire et des champs qui le composent: $valid: Indique si les règles de validation sont respectées pour le champ concerné $invalid: Indique si au moins une des règles de validation est violée pour le champ concerné mais aussi $pristine, $dirty, $error.<rule> Ces propriétés sont accessibles par la syntaxe: <nom du formulaire>.<propriété> <nom du formulaire>.<nom du champ>.<propriété> Des classes CSS équivalant à ces propriétés sont aussi générées automatiquement: ng-pristine, ng-valid, etc. Libre à nous de leur associer le style souhaité. 20

21 Validation des forms Pour indiquer à l utilisateur si sa saisie est valide on peut jouer avec du css(les classes "has-error" et "has-success" de boostrappar exemple). Pour ajouter ces classes dynamiquement, on utilise la directive ng-class et une expression: <input.. ng-class="{'has-error': registerform.$dirty, 'has-success': registerform.password.$valid}" La directive ng-show peut être utilisée pour afficher un message sous condition: <p ng-show="userform.name.$invalid &&!userform.name.$pristine" class="help-block">veuillez indiquer votre nom</p> On peut désactiver un bouton, tant qu'un formulaire n est pas valide, avec la directive ng-disabled: <input type="submit" class="btn btn-default" value="sign Up" ng-disabled="registerform.$invalid" /> Le routage Principe bien connu dans les frameworksweb de tous types, la notion de routagepermet d associer une URL à une ressource (page web dynamique ou statique). AngularJSpropose une construction d URL permettant de pointer à un "endroit" précis de l'application: le "deep-linking". Par "endroit", on entend ici pointer vers les 3 éléments qui permettent de construire une page : le template+ le contrôleur + les variables (de session ou données par l'url). La page principale est ici le templateprincipal et charge, au niveau de la directive ng-view, la vue correspondant à l URL. 21

22 Le routage La déclaration des routes se fait via les services $routeprovideret $route en utilisant la méthode config() du module. var app= angular.module('myapp', []); app.config(['$routeprovider', function($routeprovider) { $routeprovider.when('/edit/:alarmid', { templateurl: 'edit.html', controller: AlarmEditCtrl}); $routeprovider.when('/list', { templateurl: 'partial_list.html', controller: AlarmListCtrl}); $routeprovider.otherwise({ redirectto: '/list' }); }]); Le routage 2 routes sont ici déclarées pointant chacune vers une vue: une pour afficher une liste d alarmes (/list), une autre pour éditer/créer une alarme (/edit). Le fragment partial_list.htmlcontient qquechose comme: <ul> <li ng-repeat="alarm in alarms"> </li> </ul> <h3> {{alarm}} </h3> <a ng-href="#/edit/{{$index}}">editer</a> 22

23 Le routage Le fragment edit.html contient qque chose comme: <a class="btn" ng-href="#/list">retour</a> <input class="btn-success" ng-click="savealarm()" value="sauver"/> Enfin, dans le template principal on trouve: <div ng-controller="alarmctrl"> </div> <h2>nombre d'alarmes {{alarms.length}} <a class="btn-primary" ng-href="#/edit/"> Ajouter une alarme</a></h2> <div ng-view></div> Le routage Extrait du contrôleur AlarmEditCtrl: function AlarmEditCtrl($scope, $routeparams, $location) { } var newalarm = false; if ($routeparams.alarmid) { $scope.alarm = $scope.alarms[$routeparams.alarmid]; } else{ } $scope.alarm= ""; newalarm = true; $scope.savealarm = function() { if (newalarm) $scope.alarms.push($scope.alarm); else $scope.alarms[$routeparams.alarmid] = $scope.alarm; $location.path("/list"); }; 23

24 Le routage La construction d URL, lors du routage, est compatible avec la recommandation HTML5 HistoryAPI grâce à l objet $location. Pour les browsers non encore compatibles, la technique du "hashbang" est utilisée. Il est possible de paramétrer des actions à réaliser avant le chargement de la page (une animation de type sablier par exemple). Il n est pas possible de définir plusieurs directives ngviewdans une même page (pour créer des vues imbriquées). Toutefois, le module (non standard) uirouter ou la directive (standard) ng-include permettent de faire cela. Les tests La possibilité de tester facilement son code est un des plus grands atouts d AngularJS. Le découplage du code en différentes parties (contrôleurs, services, directives, ) ayant chacune une mission spécifique, en facilite le test. Deux types de tests sont à notre disposition: les tests unitaires et les tests d intégration dits tests End-to-End (E2E). 24

25 Les tests: les outils Note: les outils évoqués ici (tous des modules npm) sont inclus par les générateurs comme Yeoman. Grunt(ou gulp) pour lancer les tâches de tests (Grunt se configure via le fichier Grunfile.js). Karma pour exécuter les suites de tests. Un wizard intégré aide à la génération d'un fichier de configuration. Les tests: les outils Pour utiliser Karma au travers de tâches Grunt, on ajoute gruntkarma à l'application et on modifie Gruntfile.js: grunt.loadnpmtasks('grunt-karma'); grunt.initconfig({ karma: { unit: { configfile: 'tests/karma.conf.js'} } }); grunt.registertask('test', [ 'jshint', 'karma' ]); Note: non directement lié aux tests mais très utile, JSHintpermet de détecter les erreurs et problèmes potentiels des scripts JavaScript et vérifie le respect de certaines conventions de codage (paramétrables). 25

26 Les tests: les outils Pour les tests unitaires eux-mêmes (dans l'ordre de popularité): Jasmine, Mochaou QUnit(à préciser lors de la génération de la configuration de Karma). Certains tests ne peuvent se faire sans "mock", pour cela: ngmock(un module AngularJS). Mais c est un module à utiliser côté client, pour cela il est recommandé de l installer par le biais de Bower. Bowerest un gestionnaire de paquets (comme npm), mais optimisé pour le front-end. Pour vérifier la couverture des tests unitaires, on peut ajouter le module karma-coverage. Tests Unitaires avec Jasmine Soit le service (fibonacciservice.js) suivant: angular.module('exempletestunit', []).service('fibonacciservice', [function() { // Implémentation non-récursive: this.fibonacci = function(num) { var prev1 = 1, prev2 = 0, current= 1; for (var n = 2; n <= num; n++) { current= prev1 + prev2; prev2 = prev1; prev1 = current; } return current; }; }]); 26

27 Tests Unitaires avec Jasmine describe('exempletestunit.fibonacciservice', function() { var FibonacciService; // ngmock injecte un mock module avant chaque test: beforeeach(module('exempletestunit')); // ngmockinjecte un mockdu service à tester avant chaque test beforeeach(inject(function($injector) { })); FibonacciService = $injector.get('fibonacciservice'); it('devrait retourner les nombres corrects de la suite de Fibonacci', function() { }); }); expect(fibonacciservice.fibonacci(0)).tobe(0); expect(fibonacciservice.fibonacci(1)).tobe(1); expect(fibonacciservice.fibonacci(10)).tobe(55); Les tests: les outils Pour les tests E2E, on installe Protractoret pour le lancer comme tâche grunt grunt-protractor-runner. Protactor remplace l'ancien NGScenario. Protractorest construit au dessus WebDriverJS et Selenium Webdriver. Protactorpermet de préciser le browser avec lequel faire passer les tests (il intègre Chrome, Firefox, IE, Opera,...). Note: Protactorutilise la même syntaxe que Jasmine pour l écriture des tests. 27

28 Tests E2E avec protactor describe('angularjs homepage', function() { it('should greet the named user', function() { browser.get(' element(by.model('yourname')).sendkeys('jean'); var greeting = element(by.binding('yourname')); expect(greeting.gettext()).toequal('hello Jean!'); }); }); En complément: AngularUI Une suite de composants (très modulaire) qui complète bien le framework AngularJS. Attention: Ne fonctionne pas complètement avec AngularJS 1.3 (mais bien avec 1.2) 28

29 En complément: AngularUI UI.Utils: le couteau Suisse des projets AngularJS Ex: gestion de nouveaux événements, accès simplifié aux fonctions jquery, listes scrollable efficaces,... NGGrid: gestion de grille (utilise JQueryUIou HTML5) UI-Router: gestion des routes avec support des vues imbriquées En complément: AngularUI UI-modules: une interface avec différents modules externes, dont certains en provenance de jquery UI: fullcalendar, datepicker UI-Alias: pour créer des alias de directives UI-Gmap: un ensemble de directives pour s interfacer avec Google Map. 29

30 En complément: AngularUI Plugin pour différents IDE (Sublim, Atom,...) UI-Bootstrap: des directives AngularJSbasées sur Bootstrap3.x Note: BootstrapTwitter est une collection d'outils qui facilite la création d'un site web: carrousel, fenêtres modales, tooltip, table,... le tout de manière "responsive") Encomplément: ily a aussi Une alternative à UI-Bootstrap, plus orientée plateforme mobiles, est le framework ionic ( qui propose de nombreuses directives AngularJS Mais on peut citer aussi: Kendo UI, Wijmo, 30

31 Encomplément: ily a aussi Il existe bien d'autres modules pour AngularJS (voir ), par exemple: AngularGettext: un module très pratique qui facilite l'internationalisation de l'application. Restangular: un module fait pour utiliser une API Rest, plus simple à utiliser que le service intégré $resource. Le "back-end" Développer correctement une application SPA implique d'avoir 2 applications distinctes: une pour le front-end et l'autre pour le back-end. Est-il utile, pour autant, d'avoir un back-end MVC et en frontend AngularJS? AngularJSdéporte toute la logique de présentation côté client mais aussi le système de routage et la logique de chaque page. En général, Le back-end n'a plus en charge QUE les accès à la base de données. Le back-end n'envoie aucune vue au client, juste des données quand celui-ci les demande via des requêtes AJAX. 31

32 Le "back-end" Le back-end propose donc, le plus souvent, une API. Cette API respecte, en général, le protocole: REST (Representational State Transfer). On parle d'api RESTFul. Cette API reçoit des requêtes (HTTP avec différents verbes POST, PUT, GET,...) et retourne si besoin des résultats (au format JSON). Souvent l'api implémente un système de CRUD (Create, Read, Update, Delete). Il existe de nombreux frameworks(utilisant Node.js ou autre) qui permettent de développer une API RESTful facilement. Les promises Une promise(promesse) est un objet représentant le résultat futur d une action exécutée de manière asynchrone. On y greffe des "callbacks" de succès et d erreurs afin de pouvoir traiter le résultat renvoyé par la promise. Les promises sont intensivement utilisées dans AngularJS par le biais de ses services : $http, $resource, $timeout, etc. 32

33 Les promises L exemple de promesses le plus simple serait par exemple un GET avec le service $http (action, par nature, asynchrone qui utilise AJAX): var promise = $http.get('/users/1'); promise.then(function(value) { }); // successcallback console.log(value); Le callback de succès, la fonction passée en argument de then(), prend en argument le résultat renvoyé par la fonction asynchrone (les données de l utilisateur dans notre exemple). Les promises La signature de then()est: then(successcallback, errorcallback, notifycallback) catch(errorcallback)est un raccourci pour then(null, errorcallback). finally(callback, notifycallback) est toujours appelé, que la promise soit un succès ou un échec. Les promesses renvoyées par les services $http et $resource exposent des fonctions supplémentaires: success(function(data, status, headers, config){}) error(function(data, status, headers, config){}) 33

34 Les promises $http.get('/users/1').success(function(data, status, headers, config) { // invoqué quand la réponse est disponible }).error(function(data, status, headers, config) { // invoqué en cas d échec }); Les promises AngularJSnous permet de créer nos propres promises. Pour cela on utilise le service $q qui est une implémentation de la librairie Q en JavaScript. 34

35 Outils de debug Pour aider à la mise au point des applications Angular, quelques outils existent (en plus des debuggersjs traditionnels). Battarang(extension chrome) développée par Google pour aider au debugdes applications AngularJS, permet de: suivre l'état du modèle en temps réel (contenu des scopes et vue schématique de l'arbre des scopes). voir l'ensemble des bindings et applications de la page. visualiser le temps pris par les différentes expressions pour se réaliser. suivre au moyen d'un graphe les dépendances qui existent entre les modules de l'application. Outils de debug ng-inspector(extension Chrome et Safari) plus limité que Battarangil permet de visualiser le scope et de suivre les effets du "2-way data binding". 35

36 Editeurs et IDE Netbeans8: intègre le support natif d'angularjs(mais aussi de ses concurrents: Ember, Knockout,...). Lors de la création d'un projet, Netbeansconstruit un squelette d'application très complet (basé sur le "AngularJS Seed Template"). Aptana avec le plugin AngularJS Eclipse WebStorm Sublime Text avec AngularJS package Autres outils Yeomanest un ensemble de trois outils utiles pour le développement Web en général : Yo, Gruntet Bower. Yo est un outil de "scaffolding". Yodispose de plusieurs générateurs pour différents frameworksjs (dont un pour AngularJS). Grâce à ce générateur Yopeut créer le squelette complet d'une application AngularJSavec vues, contrôleurs, routes, tests,... Yeoman nécessite Node.js pour fonctionner. 36

37 La concurrence Il existe de nombreux concurrents au framework AngularJS. Tous sont centrés autour du pattern MV* et la plupart basés sur le principe des SPA. Les plus sérieux sont: Backbone.js (2010), KnockoutJS (2010), Ember (2011) et ReactJS (2013) Mais il y a aussi: Sails.js, CanJS, MarionetteJS, Pour vous faire une idée plus précise par vous-même de l'usage de ces frameworks, le site met àdisposition les sources d'une même application développée tour à tour avec chacun d'entre eux. La concurrence Sans rentrer dans un comparatif technique fastidieux et forcément sujet à controverses, ce que l'on peut affirmer aujourd'hui sans grand risque est qu'angularjs est un très bon frameworket sans doute aujourd'hui le plus populaire. Les petits reproches que l'on peut lui faire sont la difficulté que l'on peut rencontrer à le faire coexister avec d'autres librairies JS et son "dogmatisme" ("opinionatedframework"): il faut rentrer dans le "moule" pour tirer partie de tous ses avantages. 37

38 La concurrence Voici ce que dit par exemple Google Trends sur la popularité de ces 4 noms: La concurrence Le petit dernier, ReactJS(de Facebook) suscite aujourd'hui, à juste titre, un grand intérêt, mais il est encore jeune et pas aussi complet que les autres Frameworks. 38

39 AngularJS: son propre concurrent? Angular2.0 (annoncé pour début 2016) s'éloigne clairement de la version 1.x sans pour autant fournir de mécanisme de migration. AngularJS 2.0 se base sur un nouveau langage: AtScript (un sur-ensemble de EcmaScript6), n'utilise plus de contrôleurs, ni de $scope. Les développeurs familiarisés avec Angular1.x seront confrontés à un frameworkbien différent et devront apprendre sa nouvelle architecture. Merci pour votre attention! Vous pourrez retrouver cette présentation prochainement sur notre site: Des questions? 39