Introduction à Angular JS

INTRODUCTION À BASÉE SUR L’UNIVERSITÉ DEVOXX FRANCE 2013

SOMMAIRE INTRODUCTION 3 DÉMO 6 LES CONCEPTS FONDAMENTAUX 7 TESTS 22 CONCLUSION 24 AGENDA DU WORKSHOP 2

INTRODUCTION 1 nouveau framework MVC JavaScript +2 ans d’existence +3 développeurs principaux •Miško Hevery, Vojta Jína et Igor Minar +43 000 lignes de code JavaScript +80 Ko minifié + 3 applications significatives en production 3 ANGULARJS EN QUELQUES CHIFFRES

INTRODUCTION +SINGLE PAGE APPLICATION +DÉCLARATIF +DATA-BINDING BI-DIRECTIONNEL +HTML ENRICHI +DESIGN PATTERNS +COMPOSANTS RÉUTILISABLES 4 ANGULARJS EN QUELQUES MOTS CLÉS <google-map> <date-picker> <user-details> <tabs> « HTML enhanced for webapps »

<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.0.6/angular.min.js"> </script> </head> <body> <input ng-model="name"> <p>Hello {{name}}!</p> </body> </html> INTRODUCTION 5 HELLO WORLD Directive démarquant une application Angular Liaison du champs input au modèle Evaluation dynamique du modèle

DÉMO 6 GAME STORE hhttps://github.com/tchatel/angular-gamestore

CONCEPTS FONDAMENTAUX 7 LE DATA-BINDING BI-DIRECTIONNEL (1/3) +Nombreux systèmes de templating : String statique + données => texte ajouté au DOM par innerHTML +Tout changement sur une donnée nécessite un nouveau merge

CONCEPTS FONDAMENTAUX 8 LE DATA-BINDING BI-DIRECTIONNEL (2/3)

CONCEPTS FONDAMENTAUX +LA MAGIE DU DATA-BINDING REPOSE SUR 2 MÉCANISMES : COMPILATION DU DOM •Analyse du DOM au démarrage de l’application •Directives remplacées par fonctions JS et un scope •DOM dynamisé LES WATCHS •Surveille tout objet JavaScript •Détecte qu’une valeur a changé depuis la dernière analyse +CONTRAINTES S’applique aux objets managés par Angular Performance : limite des 2000 watches 9 LE DATA-BINDING BI-DIRECTIONNEL (3/3)

CONCEPTS FONDAMENTAUX + CONTEXTE D’EXÉCUTION D’UNE DIRECTIVE ANGULAR •Créé par les directives ng-app, ng-controler et ng-repeat +RECEPTACLE DES DONNÉES DU MODÈLE DES MÉTHODES DÉDIÉES À LA VUE +STRUCTURE HIÉRARCHIQUE SCOPE RACINE UTILISE L’HÉRITAGE PAR PROTOTYPE DU JAVASCRIPT SUIT LA STRUCTURE DU DOM +UTILISÉ LORS DE L’ÉVALUATION DES {{ EXPRESSIONS }} 10 LE SCOPE (1/3)

CONCEPTS FONDAMENTAUX 11 LE SCOPE (2/3) $scope.catalog = [ { name : 'Le Trône de Fer', price : 48.90 }, { name : 'Twilight Struggle', price : 49.90 } ]; <ul ng-controller="GameCtrl"> <li ng-repeat="game in catalog"> Nom : {{game.name}} - Tarif : {{game.price}} </li> </ul> +EXEMPLE : LISTE D’UN CATALOGUE DE JEUX DE PLATEAU Objet littéral JavaScript ajouté par le GameCtrl au scope courant : Modèle de données

CONCEPTS FONDAMENTAUX 12 LE SCOPE (3/3) <html ng-app> </html> <ul ng-controller="GameCtrl"> </ul> <li ng-repeat="game in catalog"> </li> Nom : {{game.name}} Root Scope GameCtrl Scope Repeater Scope Repeater Scope • Nom : Le Trône de Fer • Nom : Twilight Struggle catalog game

CONCEPTS FONDAMENTAUX +LE PATTERN MVC STRUCTURE LES APPLICATIONS ANGULAR +CARACTÉRISTIQUES D’UN CONTRÔLEUR : FONCTION JAVASCRIPT POSITIONNABLE SUR UN ÉLÉMENT DE LA VUE •Utilisation de la directive ng-controller. POSITIONNABLE SUR UNE VUE PARTIELLE •Lors de la définition d’une route ACCEPTE DES SERVICES EN PARAMÈTRES •Prédéfinis ou spécifiques •Injectés par Angular INDÉPENDANT DE LA VUE •Plusieurs vues possibles •Pas de manipulation de DOM •Tests facilités 13 LES CONTRÔLEURS MVC (1/2)

CONCEPTS FONDAMENTAUX +EXEMPLE : AFFICHAGE DE LA PAGE DE DÉTAIL D’UN JEU DE PLATEAU 14 LES CONTRÔLEURS MVC (2/2) function GameCtrl($scope, $routeParams, $http) { $http.get("data/" + $routeParams.ref + ".json") .success(function (data) { $scope.game = data; }); }; URL : http://localhost:8000/app/index.html#/game/AGOT <img ng-src="img/{{game.ref}}.jpg"/> <h2>{{game.name}}</h2> <p>Auteur : {{game.designer}}</p> Ressource data/AGOT.json : { "ref": "AGOT", "name": "Le Trône de Fer", … }

CONCEPTS FONDAMENTAUX +CODE TRANSVERSE AUX CONTRÔLEURS +SINGLETONS +SERVICES CLÉS EN MAIN PROPOSÉS PAR ANGULAR : 15 SERVICES (1/2) Services Description Scope Contexte d’exécution, observe les expressions Routing Gère les URL et les routes vers les contrôleurs et les sous- vues i18n Internationalisation Resource API de type REST avec support JSONP, cache, bulk Filter Fonctions de transformations sur une donnée Q (Q Library) Promise permettant de représenter le résultat différé d'une opération asynchrone

CONCEPTS FONDAMENTAUX 16 SERVICES (2/2) +SERVICES PERSONNALISÉS •Exemple d’un panier d’achats var moduleSrv = angular.module('gamestore.services', []); moduleSrv.factory('Cart', function () { return { rows: {}, add: function (game) { … }, total: function () { var sum = 0; for (var i in this.rows) { sum += this.rows[i].qty * this.rows[i].game.price; } return sum; }, totalHT: function () { return this.total() * 100 / (100 + 19.6); }, }; });

CONCEPTS FONDAMENTAUX +BASÉE SUR LE SERVICE LOCATOR INJECTOR LOOKUP PAR LE NOM DU SERVICE var cart = $injector.get('Cart'); +INJECTION DES SERVICES DANS LES CONTRÔLEURS AUTOMATIQUE PAR LEUR NOM function MainCtrl($scope, Cart) { … }; EXPLICITE function MainCtrl(scope, newCart) { … }; MainCtrl.$inject = ['$scope', 'Cart']; +BÉNÉFICES DÉCOUPLAGE SÉPARATION DES PRÉOCCUPATIONS FACILITE L’ÉCRITURE DES TESTS UNITAIRES 17 INJECTION DE DÉPENDANCES

CONCEPTS FONDAMENTAUX +FILTRE OU MODIFIE L’AFFICHAGE DES DONNÉES ÉVALUÉES +SYNTAXE INSPIRÉE DE LINUX : CARACTÈRE PIPE « | » +FILTRES PRÉ-INCLUS CURRENCY, DATE, HTML, JSON, LINKY, LOWERCASE, NUMBER, LIMITTO, ORDERBY +EXEMPLES : 18 LES FILTRES <li ng-repeat="game in catalog | filter:search"> <span class="price">{{game.price | number:2}} €</span> Critère de recherche <input ng-model="search"/> <li ng-repeat="game in catalog | orderBy:'name'"> Propriété du modèle game

CONCEPTS FONDAMENTAUX + ETEND LE HTML +BALISES OU ATTRIBUTS HTML Mais aussi classes CSS et commentaires HTML +LES DIRECTIVES FOURNIES PAR ANGULAR COMMENCENT PAR NG-* ng-click, ng-repeat, ng-model, ng-controller, ng-app, ng-show, ng-include, ng-class +PERMET LA CRÉATION DE COMPOSANTS RÉUTILISABLES JavaScript + HTML 19 DIRECTIVES (1/2) <game-img game="game"/> <a href="#/game/AGOT" class="AGOT"> <img ng-src="image/ AGOT.jpg"/> </a>

CONCEPTS FONDAMENTAUX 20 DIRECTIVES (2/2) angular.module('gamestore.directives', []) .directive('gameImg', function() { return { restrict: 'E', replace: true, scope: { game: '=' }, template: '<a href="#/game/{{game.ref}}"> <img ng-src="img/{{game.ref}}.jpg"/></a>', link: function(scope, element) { if (scope.game.name === 'Le Trône de Fer') { element.addClass('AGOT'); } }}; }); Directive de type Element (tag HTML) Le template remplace l’élément du DOM Paramètre de la directive Disponible dans le scope de la directive Fonction JS appelée avant l’affichage de la vue Dynamise la directive

TESTS +APPLICATION FACILEMENT TESTABLE PAS DE MANIPULATION DE DOM DANS LES CONTRÔLEURS MOCKS ENCOURAGÉS +TESTS UNITAIRES COUVERTURE POSSIBLE DE TOUT LE CODE JS INTÉGRATION DE JASMINE ET TESTJS DANS KARMA EN CONTINUE MULTI-NAVIGATEURS +TESTS END-TO-END À LA SELENIUM REPOSE SUR KARMA CONNAISSANCE NATIVE DU FONCTIONNEMENT D’ANGULAR 21 FACILITÉS ET COMPLETS

TESTS 22 TESTS UNITAIRES DU CONTRÔLEUR GAMECTRL // Prépare les données de test : mock simulant une réponse JSON, // scope vierge et contrôleur à tester avec paramètre HTTP $httpBackend.expectGET('data/AGOT.json') .respond( { "ref": "AGOT", "name": "Le Trône de Fer" } ); var scope = $rootScope.$new(); var ctrl = $controller('GameCtrl', {$scope: scope, $routeParams: {ref: 'AGOT'}}); // Exécution du test unitaire et assertions it('should load game information', function () { expect(scope.game).toBeUndefined(); $httpBackend.flush(); expect(scope.game.ref).toBe("AGOT"); expect(scope.game.name).toMatch(/Trône/); }); @Setup @Test

TESTS 23 TESTS END-TO-END AVEC KARMA describe('Game view', function () { beforeEach(function () { browser().navigateTo('#/game/AGOT'); }); it('should render AGOT game details view', function () { expect(element('h2').text()).toMatch(/Trône/); }); }); it('should add to cart from catalog', function () { browser().navigateTo('#/catalog'); expect(element('#catalog li').count()).toBeGreaterThan(1); element('#catalog li:nth-child(1) .add').click(); browser().navigateTo('#/catalog'); element('#catalog li:nth-child(2) .add').click(); browser().navigateTo('#/cart'); expect(element('#cart tr.game').count()).toEqual(2); });

CONCLUSION +GESTION DE LA NAVIGATION +BOUTONS PRÉCÉDENT / SUIVANT + VALIDATION DES CHAMPS D’UN FORMULAIRE + MODULARISATION + PAGINATION DE TABLEAUX + ANIMATION 24 APERÇU D’AUTRES FONCTIONNALITÉS

CONCLUSION + LES SLIDES DE L’UNIVERSITÉ SUR ANGULARJS À DEVOXX FRANCE 2013 http://tchatel.github.com/slides-angularjs/ + BLOG FRANCOPHONE SUR LE FRAMEWORK ANGULARJS http://www.frangular.com/ + TUTORIAL DU SITE OFFICIEL D’ANGULARJS http://docs.angularjs.org/tutorial + CONCEPTS DU FRAMEWORK SUR LE SITE OFFICIEL : http://docs.angularjs.org/guide/concepts + SÉRIES DE COURTES VIDÉOS RÉALISÉES PAR JOHN LINDQUIST : http://egghead.io/ + COMMUNAUTÉ GOOGLE+ ANGULARJS FRANCE : https://plus.google.com/communities/109984348857296908402 + WORKSHOP GDC ANGULARJS D’ANTOINE RICHARD Repo Github : https://github.com/antoine-richard/angular-movie-workshop Explications sur le blog de Rossi Oddet: HTTP://BLOG.RODDET.COM/2013/04/STEREOLUX-WORKSHOP-HTML5/ 25 RESSOURCES EN LIGNE

CONCLUSION 26 AVANTAGES ET INCONVÉNIENTS Avantages Inconvénients Two-way data binding Pattern du monde Java Testabilité Sponsorisé par Google Structure les développements Création de widgets Connaissances JavaScript indispensables Philosophie à appréhender Composants graphiques externes Jeunesse Verbosité HTML

CONCLUSION 27 LE TRADITIONNEL QUESTIONS / RÉPONSES

BACKING SLIDE 28 EXTRAIT DEVOXX WORLD 2012

BACKING SLIDE 29 L’ÉCOSYSTÈME DES FRAMEWORKS JAVASCRIPT Framework MVC JavaScript (Backbone.JS, Ember.JS, Knockout.JS, CanJS, AngularJS) Frameworks JavaScript DOM + UI ( jQuery, MooTools, YUI Library, Dojo Toolkit ) Templating (Handlesbar, Mustache, JAML, Eco, ICanHaz.js) Tests (QUnit, Jasmine SinonJS) CSS dynamiqes (SASS, LESS, Boostrap) Frameworks Mobile ( PhoneGap, Zepto, jQuery Mobile) Minification de CSS et JS ( YUI compressor JSMin)

Introduction à Angular JS

Contenu connexe

Tendances

En vedette

Similaire à Introduction à Angular JS

Dernier

Introduction à Angular JS

Notes de l'éditeur