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

8

+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

+ 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)

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

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

+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)

+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",
…
}

+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

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);
},
};
});

+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

+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

+ 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>

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Introduction à Angular JS

Ähnlich wie Introduction à Angular JS (20)

Introduction à Angular JS

Hinweis der Redaktion