angularj - perso.liris.cnrs.fr · angularjs porté par google force : directives peuvent se...
Post on 20-Sep-2018
217 Views
Preview:
TRANSCRIPT
AngularJmardi 17 juin 2014
PLANHistorique / PhilosophieFonctionnalitésPoints forts / faibles - Comparaison
mardi 17 juin 2014
HISTORIQUEPremière version en 2009Développé initialement par
GoogleBut : Réalisation simplifiée
d’applications web monopage
mardi 17 juin 2014
DESCRIPTIONFramework basé sur MV* : Separation of Concerns
Utilise l’injection de dépendanceData-binding bidirectionnel
mardi 17 juin 2014
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
DIRECTIVES Introduction :
mardi 17 juin 2014
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
HTML :
Javascript
Rendu
DIRECTIVES
mardi 17 juin 2014
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
Conteneur
Organisation du code
MODULE
mardi 17 juin 2014
var app = angular.module('monApp',[]);
<html ng-app=‘monApp’></html>
MODULE
mardi 17 juin 2014
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
CONTROLEURSTechniquement : Fonction étendant le scope
d’angularContient la logique applicativeRelié avec le DOM de l’application : directive
ng-controller
mardi 17 juin 2014
CONTROLEURS HTML :
Javascript :
Rendu
mardi 17 juin 2014
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
HTML :
Javascript :
Rendu
mardi 17 juin 2014
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
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
CODE SOURCE : invoke
function invoke(fn, self, locals){ var args = [], $inject = annotate(fn), length, i, key; […]}
mardi 17 juin 2014
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
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
$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
$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
$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
$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
$SCOPE
mardi 17 juin 2014
$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
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
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
ENCORE PLUS !Gestion de templatesTests unitairesFiltresGestion dynamique des formulairesProviders : Module, Fabrique, Service
creationAnimations
mardi 17 juin 2014
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...)
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
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)
CONCLUSION
mardi 17 juin 2014
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
top related