angularj - perso.liris.cnrs.fr · angularjs porté par google force : directives peuvent se...
TRANSCRIPT
![Page 1: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/1.jpg)
AngularJmardi 17 juin 2014
![Page 2: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/2.jpg)
PLANHistorique / PhilosophieFonctionnalitésPoints forts / faibles - Comparaison
mardi 17 juin 2014
![Page 3: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/3.jpg)
HISTORIQUEPremière version en 2009Développé initialement par
GoogleBut : Réalisation simplifiée
d’applications web monopage
mardi 17 juin 2014
![Page 4: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/4.jpg)
DESCRIPTIONFramework basé sur MV* : Separation of Concerns
Utilise l’injection de dépendanceData-binding bidirectionnel
mardi 17 juin 2014
![Page 5: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/5.jpg)
PHILOSOPHIEProgrammation déclarative pour les
interfacesEtendre le HTML pour le rendre plus
dynamiqueAméliorer la testabilité du code grâce
à sa structurePas de programmation JQuery
mardi 17 juin 2014
![Page 6: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/6.jpg)
DIRECTIVES Introduction :
mardi 17 juin 2014
![Page 7: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/7.jpg)
DIRECTIVESQu’est ce que les directives ? Concept primordial 4 types de directives : E, A, C, M Associée à une partie du DOM Extensibilité :
Etends les capacités du langage HTMLPossibilité de créer ces propres
directives ! Compatibilité avec HTML5
mardi 17 juin 2014
![Page 8: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/8.jpg)
HTML :
Javascript
Rendu
DIRECTIVES
mardi 17 juin 2014
![Page 9: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/9.jpg)
LES DIRECTIVES ET AU Directives prédéfinies pour un ensemble de
fonctionnalités hétéroclites:Gestion des contrôleurs : ng-controllerGestion des évènements: ng-click, ng-
mouseover, ng-mousedown, ng-keydown, ng-change
Gestion des templates: ng-bind-templateGestion des listes: ng-listMontrer/Cacher: ng-hide, ng-show
mardi 17 juin 2014
![Page 10: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/10.jpg)
Conteneur
Organisation du code
MODULE
mardi 17 juin 2014
![Page 11: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/11.jpg)
var app = angular.module('monApp',[]);
<html ng-app=‘monApp’></html>
MODULE
mardi 17 juin 2014
![Page 12: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/12.jpg)
var modules = {};return function module(name, requires, configFn) { […] return ensure(modules, name, function() { […] var moduleInstance = { […] requires: requires, name: name, provider: invokeLater('$provide', 'provider'), factory: invokeLater('$provide', 'factory'), service: invokeLater('$provide', 'service'), value: invokeLater('$provide', 'value'), constant: invokeLater('$provide', 'constant', 'unshift'), filter: invokeLater('$filterProvider', 'register'), controller: invokeLater('$controllerProvider', 'register'), directive: invokeLater('$compileProvider', 'directive'), […] }; […] return moduleInstance; […] });};
MODULE
mardi 17 juin 2014
![Page 13: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/13.jpg)
CONTROLEURSTechniquement : Fonction étendant le scope
d’angularContient la logique applicativeRelié avec le DOM de l’application : directive
ng-controller
mardi 17 juin 2014
![Page 14: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/14.jpg)
CONTROLEURS HTML :
Javascript :
Rendu
mardi 17 juin 2014
![Page 15: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/15.jpg)
ROUTESDéclaration au niveau du moduleUtilisation service : $routeProviderAssociation pattern avec une vue
AngularJSPossibilité d’association avec un
contrôleurAgit sur la portion d’url après #
mardi 17 juin 2014
![Page 16: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/16.jpg)
HTML :
Javascript :
Rendu
mardi 17 juin 2014
![Page 17: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/17.jpg)
INITIALISATION ET COMPILATION
HTML
• JavaScript• JQuery
mardi 17 juin 2014COMPILATEUR- Ajout d’attribut et d’élément html- Objectif de W3C : création de balise et d’éléments HTML- Le langage déclaratif HTML/CSS est asses limité : exemple : centrer, 1/3
- 1. On charge le module associé au directive- 2. On crée l’application Injector : injection de dépendance- 3. Compilation :
- parcours du DOM- Detect ng-app- Detection de dépendance- Chargement du SCOPE
![Page 18: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/18.jpg)
var maison = angular.module( ‘maMaison’ ,[]);maison.value(‘Mur’, ‘blanc’);
var injector = angular.injector([ ‘maMaison’ ]);
function Construction(Mur){ return ‘Le mur doit être ’ +Mur;}
injector.invoke(Construction);
mardi 17 juin 2014
![Page 19: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/19.jpg)
CODE SOURCE : invoke
function invoke(fn, self, locals){ var args = [], $inject = annotate(fn), length, i, key; […]}
mardi 17 juin 2014
![Page 20: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/20.jpg)
CODE SOURCE : annotationfunction annotate(fn) { var $inject, fnText,argDecl,last; if (typeof fn == 'function') { if (!($inject = fn.$inject)) { $inject = []; if (fn.length) { fnText = fn.toString().replace(STRIP_COMMENTS, ''); argDecl = fnText.match(FN_ARGS); forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg){ arg.replace(FN_ARG, function(all, underscore, name){ $inject.push(name); });}); } fn.$inject = $inject; } } else if (isArray(fn)) {[…]return $inject;}
var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;var FN_ARG_SPLIT = /,/;var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;var $injectorMinErr = minErr('$injector');
mardi 17 juin 2014- Expressions régulières
![Page 21: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/21.jpg)
SERVICESMultiples services déjà disponiblesLazily instanciated (instantiation
sur besoin)Singletons instantiés (non
importés)Utilisation grâce à l’injection de
dépendancesPossibilité de création
mardi 17 juin 2014
![Page 22: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/22.jpg)
$SCOPE//JavaScriptfunction control($scope) { $scope.contact=‘Salut’;}
<!-- HTML --!><div ng-controller=‘control’> {{contact}}</div>
mardi 17 juin 2014- Lien entre le controleur et la vue- Structure hiérarchique
![Page 23: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/23.jpg)
$SCOPE//JavaScriptfunction control($scope) { $scope.contact=‘Salut’;}
<!-- HTML --!><div ng-controller=‘control’> {{contact}}</div>
//JavaScriptfunction control($scope) { $scope.contact=‘Salut’}
mardi 17 juin 2014- Lien entre le controleur et la vue- Structure hiérarchique
![Page 24: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/24.jpg)
$SCOPE//JavaScriptfunction control($scope) { $scope.contact=‘Salut’;}
<!-- HTML --!><div ng-controller=‘control’> {{contact}}</div>
//JavaScriptfunction control($scope) { $scope.contact=‘Salut’}
//$SCOPESCOPE{ contact : ‘Salut’}
mardi 17 juin 2014- Lien entre le controleur et la vue- Structure hiérarchique
![Page 25: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/25.jpg)
$SCOPE//JavaScriptfunction control($scope) { $scope.contact=‘Salut’;}
<!-- HTML --!><div ng-controller=‘control’> {{contact}}</div>
//JavaScriptfunction control($scope) { $scope.contact=‘Salut’}
//$SCOPESCOPE{ contact : ‘Salut’}
<!-- HTML --!><div ng-controller=‘control’> {{contact}}</div>
mardi 17 juin 2014- Lien entre le controleur et la vue- Structure hiérarchique
![Page 26: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/26.jpg)
$SCOPE
mardi 17 juin 2014
![Page 27: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/27.jpg)
$HTTP ($.ajax ?)$http.get(‘www.serveur.fr/info.json’).success(function(data){ $scope.info=data;}).error(function(data){});
XMLHttpRequest et JSONPAvantage : code plus concis qu’AJAX
mardi 17 juin 2014
![Page 28: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/28.jpg)
DATA-BINDING
mardi 17 juin 2014- La pluspart des système templeting la communication s’effectue que dans un sens- Il y a une fusion entre les composants du modèle et la vue - Mais les changement du modèle ne sont pas automatiquement reflété dans la vue- Si la vue change => model change : développé par le programmeur
- Le Template est directement compilé dans le navigateur - Le changement de la vue est directement répercuté sur le modèle- Tous changement sur le modèle se propage sur la vue
![Page 29: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/29.jpg)
DATA-BINDING
mardi 17 juin 2014- La pluspart des système templeting la communication s’effectue que dans un sens- Il y a une fusion entre les composants du modèle et la vue - Mais les changement du modèle ne sont pas automatiquement reflété dans la vue- Si la vue change => model change : développé par le programmeur
- Le Template est directement compilé dans le navigateur - Le changement de la vue est directement répercuté sur le modèle- Tous changement sur le modèle se propage sur la vue
![Page 30: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/30.jpg)
ENCORE PLUS !Gestion de templatesTests unitairesFiltresGestion dynamique des formulairesProviders : Module, Fabrique, Service
creationAnimations
mardi 17 juin 2014
![Page 31: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/31.jpg)
POINTS FORTS
Data-bindingMVVM ou MVWDirectives (attributs HTML)
mardi 17 juin 2014Data-bindingmoins de code = moins de bug (sélecteurs CSS)manipulation DOM effectué par AngularMVVM ou MVWpas besoin de template temporaire de pré générationdonnées que le client saisit met à jour contrôleur qui met à jour la vue HTML d'origine
Directives (attributs HTML) rendent code extensible et modulableRéutilisation possible dans d'autres projetsPartage possible (AngularUI, UI Bootstrap...)
![Page 32: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/32.jpg)
Dirty checkingRéférencement (SEO) difficileIncompatibilité anciens navigateurs
POINTS FAIBLES
mardi 17 juin 2014Dirty checkingNécessaire pour le data-bindingmais capable de supporter sans problème 2000 bindings en moins de 90 millisecondesFutur : Chrome observer Ecmascript 6
RéférencementGoogle en train de bosser dessus
~Anciens navigateursNe fonctionne pas sur les versions IE < ou = 8 mais bon... No comment
![Page 33: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/33.jpg)
AngularJS
Ember.js
BackBoneJS
FRAMEWORKS CONCURRENTS
mardi 17 juin 2014AngularJSPorté par GoogleForce : directives peuvent se partager (Ref: The coding machine)
Ember.jsopen source communautaireorienté templatingpercu comme complexe et trop lourd
BackBoneJSun peu à part, car plus ossature (manière de structurer le code)
![Page 34: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/34.jpg)
CONCLUSION
mardi 17 juin 2014
![Page 35: AngularJ - perso.liris.cnrs.fr · AngularJS Porté par Google Force : directives peuvent se partager (Ref: The coding machine) Ember.js open source communautaire orienté templating](https://reader030.vdocuments.net/reader030/viewer/2022021804/5ba2f13e09d3f208588cf0aa/html5/thumbnails/35.jpg)
REFERENCES http://docs.angularjs.org http://www.angular-js.fr http://fr.wikipedia.org/wiki/AngularJS http://blog.kaliop.com/blog/2014/01/13/angularjs-
presentation http://hugeen.com/2013/02/02/mes-premiers-pas-avec-
angularjs http://www.infoq.com/fr/presentations/angular-js
mardi 17 juin 2014