SlideShare une entreprise Scribd logo
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)

Contenu connexe

Tendances

Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
Korteby Farouk
 
Workshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring IntegrationWorkshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring Integration
Antoine Rey
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
Francois ANDRE
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
François Charoy
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
DNG Consulting
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
Mathieu Hicauber
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
Abdoulaye Dieng
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
JUG Toulouse
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
Eric Bourdet
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016
Antoine Rey
 
Marzouk une introduction à jdbc
Marzouk une introduction à jdbcMarzouk une introduction à jdbc
Marzouk une introduction à jdbc
abderrahim marzouk
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
Marouan MOHAMED
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
Horacio Gonzalez
 

Tendances (20)

Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
 
Workshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring IntegrationWorkshop Spring - Session 5 - Spring Integration
Workshop Spring - Session 5 - Spring Integration
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
 
REST JUG Toulouse 20100615
REST JUG Toulouse 20100615REST JUG Toulouse 20100615
REST JUG Toulouse 20100615
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
 
Javascript
JavascriptJavascript
Javascript
 
Retours Devoxx France 2016
Retours Devoxx France 2016Retours Devoxx France 2016
Retours Devoxx France 2016
 
Marzouk une introduction à jdbc
Marzouk une introduction à jdbcMarzouk une introduction à jdbc
Marzouk une introduction à jdbc
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 

En vedette

Learned optimism
Learned optimismLearned optimism
Learned optimism
Andrew Chaa
 
Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
Antoine Rey
 
Tester unitairement une application java
Tester unitairement une application javaTester unitairement une application java
Tester unitairement une application java
Antoine Rey
 
Microservices with .Net - NDC Sydney, 2016
Microservices with .Net - NDC Sydney, 2016Microservices with .Net - NDC Sydney, 2016
Microservices with .Net - NDC Sydney, 2016
Richard Banks
 
Ces outils qui vous font gagner du temps
Ces outils qui vous font gagner du tempsCes outils qui vous font gagner du temps
Ces outils qui vous font gagner du temps
Antoine Rey
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8
Antoine Rey
 
pessimistic-development-presentation
pessimistic-development-presentationpessimistic-development-presentation
pessimistic-development-presentation
Jonathan Marbutt
 
Workshop Spring 3 - Tests et techniques avancées du conteneur Spring
Workshop Spring  3 - Tests et techniques avancées du conteneur SpringWorkshop Spring  3 - Tests et techniques avancées du conteneur Spring
Workshop Spring 3 - Tests et techniques avancées du conteneur Spring
Antoine Rey
 
Spring Framework Petclinic sample application
Spring Framework Petclinic sample applicationSpring Framework Petclinic sample application
Spring Framework Petclinic sample application
Antoine Rey
 

En vedette (9)

Learned optimism
Learned optimismLearned optimism
Learned optimism
 
Les dessous du framework spring
Les dessous du framework springLes dessous du framework spring
Les dessous du framework spring
 
Tester unitairement une application java
Tester unitairement une application javaTester unitairement une application java
Tester unitairement une application java
 
Microservices with .Net - NDC Sydney, 2016
Microservices with .Net - NDC Sydney, 2016Microservices with .Net - NDC Sydney, 2016
Microservices with .Net - NDC Sydney, 2016
 
Ces outils qui vous font gagner du temps
Ces outils qui vous font gagner du tempsCes outils qui vous font gagner du temps
Ces outils qui vous font gagner du temps
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8
 
pessimistic-development-presentation
pessimistic-development-presentationpessimistic-development-presentation
pessimistic-development-presentation
 
Workshop Spring 3 - Tests et techniques avancées du conteneur Spring
Workshop Spring  3 - Tests et techniques avancées du conteneur SpringWorkshop Spring  3 - Tests et techniques avancées du conteneur Spring
Workshop Spring 3 - Tests et techniques avancées du conteneur Spring
 
Spring Framework Petclinic sample application
Spring Framework Petclinic sample applicationSpring Framework Petclinic sample application
Spring Framework Petclinic sample application
 

Similaire à Introduction à Angular JS

C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
James RAVAILLE
 
Telecharger Exercices corrigés sqlplus
Telecharger Exercices corrigés sqlplusTelecharger Exercices corrigés sqlplus
Telecharger Exercices corrigés sqlplus
webreaker
 
Projet base de donnée
Projet base de donnée Projet base de donnée
Projet base de donnée
MakremArfaoui2
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
Xavier MARIN
 
Procédures CLR pour SQL Server : avantages et inconvénients
Procédures CLR pour SQL Server : avantages et inconvénientsProcédures CLR pour SQL Server : avantages et inconvénients
Procédures CLR pour SQL Server : avantages et inconvénients
Denis Voituron
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
svuillet
 
L’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concretsL’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concrets
Microsoft
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
Dr Samir A. ROUABHI
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
Démystification de Spring une histoire de pattern
Démystification de Spring une histoire de patternDémystification de Spring une histoire de pattern
Démystification de Spring une histoire de pattern
letourneur2
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
Design Pattern introduction
Design Pattern introductionDesign Pattern introduction
Design Pattern introduction
neuros
 
Meetup angular rshop
Meetup angular rshopMeetup angular rshop
Meetup angular rshop
Cyril Balit
 
Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx France
Marc Bojoly
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
Julien Giovaresco
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
Raphaël Semeteys
 
201303 - Java8
201303 - Java8201303 - Java8
201303 - Java8
lyonjug
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
ECAM Brussels Engineering School
 

Similaire à Introduction à Angular JS (20)

C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
 
Telecharger Exercices corrigés sqlplus
Telecharger Exercices corrigés sqlplusTelecharger Exercices corrigés sqlplus
Telecharger Exercices corrigés sqlplus
 
Projet base de donnée
Projet base de donnée Projet base de donnée
Projet base de donnée
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Procédures CLR pour SQL Server : avantages et inconvénients
Procédures CLR pour SQL Server : avantages et inconvénientsProcédures CLR pour SQL Server : avantages et inconvénients
Procédures CLR pour SQL Server : avantages et inconvénients
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
L’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concretsL’atout cartographie en mobilité : implémentation pratique et cas concrets
L’atout cartographie en mobilité : implémentation pratique et cas concrets
 
Meetup angular rshop
Meetup angular rshopMeetup angular rshop
Meetup angular rshop
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
Perf university
Perf universityPerf university
Perf university
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Démystification de Spring une histoire de pattern
Démystification de Spring une histoire de patternDémystification de Spring une histoire de pattern
Démystification de Spring une histoire de pattern
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Design Pattern introduction
Design Pattern introductionDesign Pattern introduction
Design Pattern introduction
 
Meetup angular rshop
Meetup angular rshopMeetup angular rshop
Meetup angular rshop
 
Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx France
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
 
201303 - Java8
201303 - Java8201303 - Java8
201303 - Java8
 
Johnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScriptJohnny-Five : Robotique et IoT en JavaScript
Johnny-Five : Robotique et IoT en JavaScript
 

Introduction à Angular JS

  • 1. INTRODUCTION À BASÉE SUR L’UNIVERSITÉ DEVOXX FRANCE 2013
  • 2. SOMMAIRE INTRODUCTION 3 DÉMO 6 LES CONCEPTS FONDAMENTAUX 7 TESTS 22 CONCLUSION 24 AGENDA DU WORKSHOP 2
  • 3. 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
  • 4. 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 »
  • 5. <!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
  • 7. 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
  • 9. 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)
  • 10. 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)
  • 11. 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
  • 12. 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
  • 13. 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)
  • 14. 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", … }
  • 15. 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
  • 16. 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); }, }; });
  • 17. 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
  • 18. 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
  • 19. 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>
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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); });
  • 24. 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
  • 25. 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
  • 26. 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
  • 29. 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)

Notes de l'éditeur

  1. Autres frameworks MVC JavaScript : Knockout.js, Ember.js, Backbone.js, CanJS Intégration possible avec JQuery, RequireJS Google : DART, GWT, Angular, GO Applis en prod : manager OVH v5 beta, Google Doublick for publishers, Youtube pour PS3
  2. SPA : Angular cible les applications dynamiques (appli web RIA versus sites statiques) Exemples : Gmail, applis développés en GWT Les applis de gestion sont de parfaits candidats A relativiser : notions de vue ⬄ pages. Même .html mais ancres # différentes pour chaque vue. Un refresh (F5) réinitialise l’application. Déclaratif: là où JQuery reste de l’impératif=> moins de code JavaScript de manipulation du DOM Angular propose un sous-ensemble de JQuery (ex: addClass, removeClass) basée sur une implémentation jQlite. JQuery est optionnel. Si présente Angular, utilisera JQuery à la place de jQlite. Facilite le travail avec les web designers Data-binding : un modèle, plusieurs vues Angular enrichit le HTML à l’aide de directives : balises et tags ng-xxx, influence sur HTML 6 Design Patterns : MVC, IoC, Factory, Singleton Composants : création de nouveaux tags HTML pour alléger les pages. Initiative des Web Components au sein du W3C (cf. Angular-UI, Work in Progress…)
  3. Doctype HTML 5 Possibilité d’intégrer Angular sur une d’une application existante en positionnant ng-app sur un div La notation entre double accolades référence une variable AngularJS L’attribut ng-model dans la balise input est une directive Angular qui permet de lier la variable name au champ de texte Au chargement de la page dans le navigateur, le champs de saisie est vide. Lors d’une saisie, la balise <p>Hello est immédiatement mise à jour.
  4. Solutions de templating JS : Mustache, Handlesbar
  5. Aucune action nécessaire par le développeur pour rafraichir la vue lorsque le modèle a changé, même depuis la vue.
  6. Observation manuelle des changements du modèle par appel de la fonction $watch Le plugin Batarang pour Chrome permet d’avertir le développeur des data-binding trop coûteux Initiative Object.observe() pour améliorer nativement les performances. Support dans Chrome depuis Canary 25, pour les autres ??
  7. Espace de stockage entre une balise ouvrante et fermante Lien entre le modèle, la vue et le contrôleur Durée de vie bornée par sa directive Scope racine : rootScope => 1 par application
  8. catalog : nom du tableau sur lequel itérer game : variable locale au <li> de chaque itération
  9. Permet également de travailler avec les patterns Model View Presenter (MVP) et Model View ViewModel (MVVM). Un contrôleur définit l’état initial d’un scope, et permet gérer ce scope => il implémente les règles métiers gérant le modèle de données Le contrôleur ne doit pas : Manipuler le DOM -> responsabilité des directives, et le data-binding assure la maj de la vue suite à la modif du modèle par le contrôleur Formater ou filtre les données (angular form controls, angular filter) Implémenter du code partagé entre contrôleur -> utiliser des services
  10. L’attribut ng-src permet d’éviter des erreurs 404 au chargement de la page
  11. Exemple : un panier d’achat Service = un objet JavaScript avec des propriétés et des fonctions Les services fournis par Angular sont reconnaissables par leur préfixe $ Promise : à rapprocher aux FutureTask de Java
  12. Module : permet d’organiser le code (découpage technique et/ou fonctionnel) La méthoe add(game) ajoute un jeu dans le tableau rows
  13. Egalement : injection des services dans les fabriques de méthodes TU : passage de bouchons aux contrôleurs testés Angular met à disposition des mocks pour certains services pré-définis (ex: http)
  14. Currency, Date : formattage monnaie, date limitTo : sous-tableau (>0 : depuis le début, <0 depuis la fin)
  15. Permet de dynamiser un DOM statique contenant du HTML et du CSS. Transforme la page HTML en template Directives : ng-click : fait appel sur un clic utilisateur à une fonction du contrôleur JS associé ng-repeat : itération sur des collections (li, tr) ng-model : référence une donnée du scope ng-controller : spécifie le contrôleur JS à utiliser ng-show : affiche un nœud en fonction de la condition passée ng-include : inclue une page HTML partielle ng-class : ajoute ou supprime une classe CSS sur un nœud Exemple de directives supplémentaires : BindOnce (permet de faire un bind sans watch) -> reprend certaines directives angular Bo-text, Bo-href
  16. Mécanismes à connaître pour créer une directive : compilation, linking, transclusion, scope, interpolation gameImg est le nom de la directive (camel case). Utilisation dans le code HTML : game-img, game:img, … Restrict accepte les 4 types : E : Element A : Attribut C : Class M : Comment Link : fonction JS appelée pendant la phase de Linking, à savoir après la phase de compilation de la directive mais avant l’affichage de la vue
  17. Karma = ex-testacular En continue à la Infinitest E2E : support des requêtes Ajax et de la mise à jour cyclique lors de data-binding
  18. Démo : D:\Dev\Devoxx2013\angular-gamestore\scripts\test.bat
  19. Démo : node scripts\web-server.js D:\Dev\Devoxx2013\angular-gamestore\scripts\e2e-test.bat
  20. Gestion de la navigation : routing Gestion des boutons précédent/suivant, historique, bookmark, permet l’ indexation dans les moteurs de recherche Pour gérer l’historique et le bouton Back, Angular sait exploiter l’API History HTML 5 si elle est dispo Validation Validateur fourni : date, email, entier, nombre, URL, regexp + validateur curstom + gestion de l’asynchrone Validation asynchrone et validateur personnalisé Attribut required du HTML5 et polyfill pour navigateurs non compatibles Modularisation : espaces de nommage, découpage technique et/ou fonctionnels Animation : animations CSS disponibles dans la version béta 1.1.x
  21. Vidéo de l’université disponible gratuitement sur Parleys
  22. Donne envie de se (re)mettre au HTML Facilite le travail avec les intégrateurs web plain old JavaScript sans surcouche Laisse possible l’utilisation de CoffeeScript et de TypeScript