angularj - perso.liris.cnrs.fr · angularjs porté par google force : directives peuvent se...

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

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



//JavaScriptfunction control($scope) { $scope.contact=‘Salut’}





//$SCOPESCOPE{ contact : ‘Salut’}


$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

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

angularj - perso.liris.cnrs.fr · angularjs porté par google force : directives peuvent se...

Documents