SlideShare une entreprise Scribd logo
1  sur  53
Télécharger pour lire hors ligne
Digital performance.
ANGULARJS
OUADIE LAHDIOUI OLAHDIOUI@SQLI.COM 23 AVRIL 2015
PROGRAMME DE LA FORMATION
+ Introduction
+ Cycle de vie
+ Principes généraux
+ Modèle, vues et contrôleurs
+ Les modules
+ Les directives et les filtres
+ Cycles de vie et scopes
+ Les services Angular
+ AJAX et REST
+ Aller plus loin
+ Démonstration
SOMMAIRE
© SQLI Enterprise – SQLI GROUP | 2015 2
+ Architecture et fonctionnalités d'AngularJS
+ Qu'est-ce qu'une architecture orientée REST ?
© SQLI Enterprise – SQLI GROUP | 2015 3
1INTRODUCTION
+ Un framework JavaScript développé par une équipe Google
+ Permet d’implémenter côté front-end le pattern MVW (MV*)
+ Apporte aux applications web côté client les services traditionnellement apportés côté
serveur :
ARCHITECTURE ET FONCTIONNALITÉS D'ANGULARJS
© SQLI Enterprise – SQLI GROUP | 2015 4
+ lnjection de dépendances
+ MVC
+ Tests unitaires
+ Data-binding bidirectionnel
+ Routing
+ le templating
+ Representational State Transfer
+ REST n’est pas un protocole ou un format, c’est un style d’architecture qui repose sur le
protocole HTTP
+ Principes :
ARCHITECTURE ORIENTÉE REST
© SQLI Enterprise – SQLI GROUP | 2015 5
+ L’URI est important : connaître l’URI doit suffire pour nommer et identifier une ressource
+ HTTP fournit toutes les opérations nécessaires (HEAD, GET, POST, PUT, DELETE, OPTION)
+ Exemple d’URLs REST :
+ Créer un nouveu client : POST http://www.example.com/customers
+ Récupérer un client par identifiant : GET http://www.example.com/customers/33245
+ Le même URL peut être utilisé avec
les méthodes PUT et DELETE
ARCHITECTURE ORIENTÉE REST
© SQLI Enterprise – SQLI GROUP | 2015 6
+ Hybris SAP
+ JAVA 
+ HTML, AngularJS et CSS
+ Service Web REST
+ Pattern MV*
+ Data-binding bi-directionnel
+ Avantages et inconvénients
+ Installation et découverte
+ Application « Hello world! »
© SQLI Enterprise – SQLI GROUP | 2015 7
2PRINCIPES GÉNÉRAUX
+ Model-View-Whatever (whatever works for you)
+ Model: représente les données reçues du serveur
+ View: contient l’ensemble des vues affichées à l’utilisateur
+ Controller: contient la logique de l’application
PATTERN MV*
© SQLI Enterprise – SQLI GROUP | 2015 8
+ MVC + MVVM
1/2
DATA-BINDING BI-DIRECTIONNEL
© SQLI Enterprise – SQLI GROUP | 2015 9
+ Nombreux systèmes de templating : String statique + données = text ajouté au DOM par innerHTML
+ Tout changement sur une donnée nécessite un nouveau merge
2/2
DATA-BINDING BI-DIRECTIONNEL
© SQLI Enterprise – SQLI GROUP | 2015 10
AVANTAGES ET INCONVÉNIENTS
© SQLI Enterprise – SQLI GROUP | 2015 11
Avantages inconvénients
Two-way data binding Connaissances javaScript indispensables
Pattern du monde java Philosophie à appréhender
Testabilité Composants graphiques externes
Sponsorisé par Google
+ Rendez-vous sur www.angularjs.org
INSTALLATION ET DÉCOUVERTE
© SQLI Enterprise – SQLI GROUP | 2015 12
angular.min.js
APPLICATION « HELLO WORLD! »
© SQLI Enterprise – SQLI GROUP | 2015 13
+ Directive démarquant une application AngularJS
+ Liaison du champs input au modèle+ Evaluation dynamique du modèle
+ Le modèle
+ Les vues : templates
+ Les vues : expression
+ Les vues : directives
+ Les vues : filtres
+ Les contrôleurs : fonctionnement
+ Les contrôleurs : le $scope
© SQLI Enterprise – SQLI GROUP | 2015 14
3MODÈLE, VUES ET CONTRÔLEURS
+ Structure de données représentant une entité de l'application
+ Généralement transmise en JSON
LE MODÈLE
© SQLI Enterprise – SQLI GROUP | 2015 15
{
"users" : [{
"name": "Joe",
"id": "82047392"
},{
"name": "John",
"id": "65198013"
}]
}
1/4
+ Ce que voit l'utilisateur final
+ AngularJS, intègre nativement un moteur de template
+ Template : fichier HTML enrichi de certains attributs et balises propres à AngularJS
LES VUES : TEMPLATES
© SQLI Enterprise – SQLI GROUP | 2015 16
+ Le langage d'expressions d'AngularJS est utiliser pour le binding
+ Des expressions valides :
LES VUES : EXPRESSION
© SQLI Enterprise – SQLI GROUP | 2015 17
+ Le code mis dans les vues :
Difficilement gérable
Ne peut pas faire l'objet de tests unitaires
2/4
3/4
+ Une directive = Flag placé dans la vue
+ Les navigateurs ne reconnaissent pas ces flags, c’est à angularjs de les traiter
+ Balise ou attributs HTML, mais aussi classes CSS et commentaires HTML
+ Permet la création de composants réutilisables
LES VUES : DIRECTIVES
© SQLI Enterprise – SQLI GROUP | 2015 18
+ Filtre ou modifie l’affichage des données évaluées
+ Syntaxe inspirée de linux : caractère pie « | »
+ Filtres pré-inclus : currency, date, json, lowercase, number, limitTo…
LES VUES : FILTRES
© SQLI Enterprise – SQLI GROUP | 2015 19
4/4
+ Le contrôleur est une fonction javascript liée à la vue par la directive ng-controller
LES CONTRÔLEURS : FONCTIONNEMENT
© SQLI Enterprise – SQLI GROUP | 2015 20
1/2
2/2
+ Un scope, c'est un domaine dans lequel des variables peuvent exister
+ La racine de tous les scopes est le $rootScope
+ Un objet javaScript
+ Créé par les directives ng-app, ng-controler et ng-repeat
LES CONTRÔLEURS : LE $SCOPE
© SQLI Enterprise – SQLI GROUP | 2015 21
+ Création et configuration
+ Injection de dépendances
© SQLI Enterprise – SQLI GROUP | 2015 22
4LES MODULES
+ Permet d’encapsuler l’ensemble des éléments d’une application AngularJS
+ Un module permet de déclarer : directives, controleurs, filtres, constantes et services
+ Pour créer un module :
CRÉATION ET CONFIGURATION
© SQLI Enterprise – SQLI GROUP | 2015 23
+ L’affectation d’une valeur à la directive ngApp implique le chargement du module déclaré avec cet identifiant
+ Créer le module demoApp
+ Basée sur le service $injector :
+ L’injection des services dans les contrôleurs :
+ Automatiquement par leur nom :
INJECTION DE DÉPENDANCES
© SQLI Enterprise – SQLI GROUP | 2015 24
+ Explicite :
+ Bénéfices :
+ Découplage
+ Séparation des préoccupations
+ Convention de nommage, écriture normalisée
+ Types de directives
+ Créer ses propres directives
+ Créer ses propres filtres
© SQLI Enterprise – SQLI GROUP | 2015 25
5
LES DIRECTIVES ET LES FILTRES
+ AngularJS normalise le nom de la derictive en camelCase
+ une directive dont le nom est myProduct pourra être utilisée avec les différentes
orthographes suivantes :
CONVENTION DE NOMMAGE, ÉCRITURE NORMALISÉE
© SQLI Enterprise – SQLI GROUP | 2015 26
+ <my-product>
+ <data-my-product>
+ <x-my-product>
+ <my:product>
+ <my_product>
+ Il existe 4 types de directive :
TYPES DE DIRECTIVES
© SQLI Enterprise – SQLI GROUP | 2015 27
+ Directive de type Element :
+ Directive de type Attribut :
+ Directive de type Classe :
+ Directive de type Commentaire :
+ Restrict :
+ E = Element
+ A = Attribute
+ C = Classe
+ M = Comment
CRÉER SES PROPRES DIRECTIVES
© SQLI Enterprise – SQLI GROUP | 2015 28
CRÉER SES PROPRES FILTRES
© SQLI Enterprise – SQLI GROUP | 2015 29
+ Le nom du filtre
+ u2713 -> ✓
+ u2718 -> ✘
+ Création du filtre dans le module myApp :
+ L’application du filtrer sur le vue :
+ Présentation du fonctionnement d’AngularJS
+ L’arbre des scopes
© SQLI Enterprise – SQLI GROUP | 2015 30
6
CYCLES DE VIE ET SCOPES
+ Le navigateur charge le HTML et le transforme en DOM.
+ AngularJS attend l’évènement DOMContentLoaded, puis cherche une directive nommée
ng-app qui définit les frontières de l’application.
+ Le service d’injection ($injector) est utilisé pour créer le $rootScope et le service $compile
qui va compiler le DOM et le lier au $rootScope.
+ Les éléments dynamiques tels que les expressions sont alors rendus
PRÉSENTATION DU FONCTIONNEMENT D’ANGULARJS
© SQLI Enterprise – SQLI GROUP | 2015 31
+ Les scopes : des objets qui servent de contexte d'évaluation des expressions contenues
dans les templates
L’ARBRE DES SCOPES
© SQLI Enterprise – SQLI GROUP | 2015 32
+ Les services natifs
+ Les values et constant
+ Factory, Service et Provider
© SQLI Enterprise – SQLI GROUP | 2015 33
7LES SERVICES ANGULARJS
LES SERVICES NATIFS
© SQLI Enterprise – SQLI GROUP | 2015 34
+ Singletons nommés qui vont fournir une tâche précise
+ Ils peuvent être ensuite injectés dans un contrôleur ou un autre service
+ Chargés uniquement si besoin (lazy load)
+ AngularJS propose plusieurs méthodes pour créer un service :
+ module.provider()
+ module.service()
+ module.factory()
+ module.value()
+ module.constant()
1/2
+ $document :
LES SERVICES NATIFS
© SQLI Enterprise – SQLI GROUP | 2015 35
+ $location :
+ $log :
2/2
1/3
+ Techniquement, un service, une factory ou un provider, ça sert à la même chose
+ Un service est une manière plus facile d’écrire une factory, qui est une manière plus
simple d’écrire un provider
+ Provider :
FACTORY, SERVICE ET PROVIDER
© SQLI Enterprise – SQLI GROUP | 2015 36
+ La manière la plus configurable de créer un service
+ Son rôle principl, c’est de créer et mettre à disposition un objet
2/3
+ Factory :
FACTORY, SERVICE ET PROVIDER
© SQLI Enterprise – SQLI GROUP | 2015 37
+ Un raccourci pour écrire un provider
+ Pas de méthode $get à écrire
3/3
+ Service :
FACTORY, SERVICE ET PROVIDER
© SQLI Enterprise – SQLI GROUP | 2015 38
+ La fonction va être utilisée directement (avec new) pour créer l’objet
+ Pas besoin de return, on attache tout à this
+ Le choix entre une factory et un service est vraiment une question de goût
1/3
+ Plus simplifiée que les service et factory, car son second paramètre est directement
l'instance du service à publier
+ il ne peut pas bénéficier d'injection d'autres services
+ AngularJS créé automatiquement un provider, mais qui ne fera que renvoyer l'instance
préexistante du service
LES VALUES ET CONSTANT
© SQLI Enterprise – SQLI GROUP | 2015 39
+ value:
2/3
+ Comme value, l'instance du service est un objet existant avant l'appel de la méthode
constant
+ La méthode constant enregistre aussi cet objet comme étant un provider, sous le même
nom que le service donc sans le suffixe 'Provider
LES VALUES ET CONSTANT
© SQLI Enterprise – SQLI GROUP | 2015 40
+ Constant :
3/3
FACTORY, SERVICE ET PROVIDER
© SQLI Enterprise – SQLI GROUP | 2015 41
+ Le service « $http »
+ Le service « $resource »
+ L’API de promise
© SQLI Enterprise – SQLI GROUP | 2015 42
8AJAX ET REST
+ un service bas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP
+ $http.get : une requete HTTP de type GET
+ $http.head : une requete HTTP de type HEAD
+ $http.post : une requete HTTP de type POST
+ $http.put : une requete HTTP de type PUT
+ $http.jsonp : une requete HTTP avec JSONP comme format de retour
LE SERVICE « $HTTP »
© SQLI Enterprise – SQLI GROUP | 2015 43
+ Un service haut niveau dédié à l’appel d’API REST
+ La ressource propose les méthodes get(), query(), save(), et delete()
+ $resource n’est pas inclus par défaut dans le framwork AngularJS
LE SERVICE « $RESOURCE »
© SQLI Enterprise – SQLI GROUP | 2015 44
+ Une promise : un objet représentant le résultat futur d’une action exécutée de manière
asynchrone
+ L’API de promise utilisée dans AngularJS par le biais de ses services : $http, $resource …
L’API DE PROMISE
© SQLI Enterprise – SQLI GROUP | 2015 45
+ Les services $http et $resource exposent des fonctions supplémentaires plus pratiques :
+ Quelques directives AngularJS
+ SPA (Single Page Application)
+ Bonnes pratiques
+ Outils de debug : ng-instpector, Batarang
© SQLI Enterprise – SQLI GROUP | 2015 46
9ALLER PLUS LOIN
BINDING
+ Ng-app
+ Ng-controller
QUELQUES DIRECTIVES ANGULARJS
© SQLI Enterprise – SQLI GROUP | 2015 47
+ Ng-disabled
+ Ng-hide
+ Ng-show
+ Ng-repeat
+ Ng-switch
+ Ng-change
+ Ng-checked
+ Ng-click
+ Ng-href
+ Ng-selected
+ Ng-minlength
+ Ng-maxlength
+ Ng-required
+ Ng-list
+ Ng-option
+ Ng-submit
TEMPLATE OPÉRATION FORMULAIREAPPLICATION
+ Ng-init
+ Ng-bind
+ Ng-model
+ Ng-style
+ Une application web accessible via une page web unique afin d’éviter le chargement d’une
nouvelle page à chaque action demandée
+ Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page
mais le contenu est modifié au fur et à mesure selon les requêtes
+ Configurer l’affichage des différentes pages :
+ Définir les routes :
SPA (SINGLE PAGE APPLICATION)
© SQLI Enterprise – SQLI GROUP | 2015 48
+ Définir l’endroit où se “rendra” la vue :
+ Avant d’utiliser une méthode fournie par jQuery, demandez vous toujours si AngularJS ne
propose pas une solution.
+ Il faut préférer les directives AngularJS au directives HTML :
BONNES PRATIQUES
© SQLI Enterprise – SQLI GROUP | 2015 49
+ Il faut toujours utiliser « track by » dans les directive ngRepeat :
+ Ne pas oublier le principe SRP au moment de création des services
+ Single Responsibility
BONNES PRATIQUES
© SQLI Enterprise – SQLI GROUP | 2015 50
+ Un unique contrôleur pour toute l’application
+ Code dupliqué dans les différents contrôleur
+ Manipulation directe du DOM en dehors des directives
+ Code complexe dans les expressions et non dans le contrôleur
+ Je met un gros conteneur avec tout dedans et tout le monde y accède
+ Non respect des bonnes pratiques :
+ ng-inspector : un plugin chrome pour étudier les scopes AngularJS, il affiche les scopes
sous forme arborescente.
+ Batarang : un plugin chrome pour faciliter le debuggage des applications.
OUTILS DE DEBUG
© SQLI Enterprise – SQLI GROUP | 2015 51
ng-inspector Batarang
+ AngularJS & Accélérateur B2B Hybris (PowerTools)
© SQLI Enterprise – SQLI GROUP | 2015 52
10DÉMONSTRATION
MERCI POUR VOTRE ATTENTION
© SQLI Enterprise – SQLI GROUP | 2015 53

Contenu connexe

Tendances

Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSFrédéric DUPERIER
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the futureOuadie LAHDIOUI
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Yves-Emmanuel Jutard
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSPeak Ace
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365Sébastien Levert
 

Tendances (20)

Intro à angular
Intro à angularIntro à angular
Intro à angular
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Test angular 2+
Test angular 2+Test angular 2+
Test angular 2+
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365
 

Similaire à AngularJS

les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture Mouna Maazoun
 
Industrialiser le développement avec silverlight 4 et wcf ria services
Industrialiser le développement avec silverlight 4 et wcf ria servicesIndustrialiser le développement avec silverlight 4 et wcf ria services
Industrialiser le développement avec silverlight 4 et wcf ria servicesArnaud Auroux
 
Expérience pratique de développement Azure
Expérience pratique de développement AzureExpérience pratique de développement Azure
Expérience pratique de développement AzureLevio
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebDekeltv1
 
Présentation partner coliseum 1
Présentation partner coliseum 1Présentation partner coliseum 1
Présentation partner coliseum 1ArielleMeffre
 
Présentation partner coliseum
Présentation partner coliseumPrésentation partner coliseum
Présentation partner coliseumbiswajit44
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe Didiergeorges
 
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...CERTyou Formation
 
TechDays 2012 - Windows Azure - ALM
TechDays 2012 - Windows Azure - ALMTechDays 2012 - Windows Azure - ALM
TechDays 2012 - Windows Azure - ALMJason De Oliveira
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuPublicis Sapient Engineering
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryObjet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryFactoVia
 
Meetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature ModulesMeetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature ModulesDaniel Djordjevic
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Microsoft Technet France
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 

Similaire à AngularJS (20)

Meet up sqli lyon 09-2015 - Angular
Meet up sqli lyon 09-2015 - AngularMeet up sqli lyon 09-2015 - Angular
Meet up sqli lyon 09-2015 - Angular
 
Prezentare ASP.Net.pptx
Prezentare ASP.Net.pptxPrezentare ASP.Net.pptx
Prezentare ASP.Net.pptx
 
les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture
 
Meet up sqli lyon 09-2015 - Gradle
Meet up sqli lyon 09-2015 - GradleMeet up sqli lyon 09-2015 - Gradle
Meet up sqli lyon 09-2015 - Gradle
 
Industrialiser le développement avec silverlight 4 et wcf ria services
Industrialiser le développement avec silverlight 4 et wcf ria servicesIndustrialiser le développement avec silverlight 4 et wcf ria services
Industrialiser le développement avec silverlight 4 et wcf ria services
 
Expérience pratique de développement Azure
Expérience pratique de développement AzureExpérience pratique de développement Azure
Expérience pratique de développement Azure
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Présentation partner coliseum 1
Présentation partner coliseum 1Présentation partner coliseum 1
Présentation partner coliseum 1
 
Présentation partner coliseum
Présentation partner coliseumPrésentation partner coliseum
Présentation partner coliseum
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
Introducthion mvvm avec wpf
Introducthion mvvm avec wpfIntroducthion mvvm avec wpf
Introducthion mvvm avec wpf
 
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...
M20246 formation-piloter-et-controler-un-cloud-prive-avec-microsoft-system-ce...
 
TechDays 2012 - Windows Azure - ALM
TechDays 2012 - Windows Azure - ALMTechDays 2012 - Windows Azure - ALM
TechDays 2012 - Windows Azure - ALM
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Modele mvc
Modele mvcModele mvc
Modele mvc
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software FactoryObjet direct 2013-05-11 Microsoft ALM 2013 Software Factory
Objet direct 2013-05-11 Microsoft ALM 2013 Software Factory
 
Meetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature ModulesMeetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature Modules
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 

Plus de Ouadie LAHDIOUI

Apache camel et les entreprise integration patterns
Apache camel et les entreprise integration patternsApache camel et les entreprise integration patterns
Apache camel et les entreprise integration patternsOuadie LAHDIOUI
 
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre API
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre APIREST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre API
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre APIOuadie LAHDIOUI
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Ouadie LAHDIOUI
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 

Plus de Ouadie LAHDIOUI (6)

Prismic
PrismicPrismic
Prismic
 
Debug like a doctor
Debug like a doctorDebug like a doctor
Debug like a doctor
 
Apache camel et les entreprise integration patterns
Apache camel et les entreprise integration patternsApache camel et les entreprise integration patterns
Apache camel et les entreprise integration patterns
 
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre API
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre APIREST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre API
REST : Modèle de maturité de Richardson, Pour évaluer la RESTitude de votre API
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 

AngularJS

  • 1. Digital performance. ANGULARJS OUADIE LAHDIOUI OLAHDIOUI@SQLI.COM 23 AVRIL 2015
  • 2. PROGRAMME DE LA FORMATION + Introduction + Cycle de vie + Principes généraux + Modèle, vues et contrôleurs + Les modules + Les directives et les filtres + Cycles de vie et scopes + Les services Angular + AJAX et REST + Aller plus loin + Démonstration SOMMAIRE © SQLI Enterprise – SQLI GROUP | 2015 2
  • 3. + Architecture et fonctionnalités d'AngularJS + Qu'est-ce qu'une architecture orientée REST ? © SQLI Enterprise – SQLI GROUP | 2015 3 1INTRODUCTION
  • 4. + Un framework JavaScript développé par une équipe Google + Permet d’implémenter côté front-end le pattern MVW (MV*) + Apporte aux applications web côté client les services traditionnellement apportés côté serveur : ARCHITECTURE ET FONCTIONNALITÉS D'ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 4 + lnjection de dépendances + MVC + Tests unitaires + Data-binding bidirectionnel + Routing + le templating
  • 5. + Representational State Transfer + REST n’est pas un protocole ou un format, c’est un style d’architecture qui repose sur le protocole HTTP + Principes : ARCHITECTURE ORIENTÉE REST © SQLI Enterprise – SQLI GROUP | 2015 5 + L’URI est important : connaître l’URI doit suffire pour nommer et identifier une ressource + HTTP fournit toutes les opérations nécessaires (HEAD, GET, POST, PUT, DELETE, OPTION) + Exemple d’URLs REST : + Créer un nouveu client : POST http://www.example.com/customers + Récupérer un client par identifiant : GET http://www.example.com/customers/33245 + Le même URL peut être utilisé avec les méthodes PUT et DELETE
  • 6. ARCHITECTURE ORIENTÉE REST © SQLI Enterprise – SQLI GROUP | 2015 6 + Hybris SAP + JAVA  + HTML, AngularJS et CSS + Service Web REST
  • 7. + Pattern MV* + Data-binding bi-directionnel + Avantages et inconvénients + Installation et découverte + Application « Hello world! » © SQLI Enterprise – SQLI GROUP | 2015 7 2PRINCIPES GÉNÉRAUX
  • 8. + Model-View-Whatever (whatever works for you) + Model: représente les données reçues du serveur + View: contient l’ensemble des vues affichées à l’utilisateur + Controller: contient la logique de l’application PATTERN MV* © SQLI Enterprise – SQLI GROUP | 2015 8 + MVC + MVVM
  • 9. 1/2 DATA-BINDING BI-DIRECTIONNEL © SQLI Enterprise – SQLI GROUP | 2015 9 + Nombreux systèmes de templating : String statique + données = text ajouté au DOM par innerHTML + Tout changement sur une donnée nécessite un nouveau merge
  • 10. 2/2 DATA-BINDING BI-DIRECTIONNEL © SQLI Enterprise – SQLI GROUP | 2015 10
  • 11. AVANTAGES ET INCONVÉNIENTS © SQLI Enterprise – SQLI GROUP | 2015 11 Avantages inconvénients Two-way data binding Connaissances javaScript indispensables Pattern du monde java Philosophie à appréhender Testabilité Composants graphiques externes Sponsorisé par Google
  • 12. + Rendez-vous sur www.angularjs.org INSTALLATION ET DÉCOUVERTE © SQLI Enterprise – SQLI GROUP | 2015 12 angular.min.js
  • 13. APPLICATION « HELLO WORLD! » © SQLI Enterprise – SQLI GROUP | 2015 13 + Directive démarquant une application AngularJS + Liaison du champs input au modèle+ Evaluation dynamique du modèle
  • 14. + Le modèle + Les vues : templates + Les vues : expression + Les vues : directives + Les vues : filtres + Les contrôleurs : fonctionnement + Les contrôleurs : le $scope © SQLI Enterprise – SQLI GROUP | 2015 14 3MODÈLE, VUES ET CONTRÔLEURS
  • 15. + Structure de données représentant une entité de l'application + Généralement transmise en JSON LE MODÈLE © SQLI Enterprise – SQLI GROUP | 2015 15 { "users" : [{ "name": "Joe", "id": "82047392" },{ "name": "John", "id": "65198013" }] }
  • 16. 1/4 + Ce que voit l'utilisateur final + AngularJS, intègre nativement un moteur de template + Template : fichier HTML enrichi de certains attributs et balises propres à AngularJS LES VUES : TEMPLATES © SQLI Enterprise – SQLI GROUP | 2015 16
  • 17. + Le langage d'expressions d'AngularJS est utiliser pour le binding + Des expressions valides : LES VUES : EXPRESSION © SQLI Enterprise – SQLI GROUP | 2015 17 + Le code mis dans les vues : Difficilement gérable Ne peut pas faire l'objet de tests unitaires 2/4
  • 18. 3/4 + Une directive = Flag placé dans la vue + Les navigateurs ne reconnaissent pas ces flags, c’est à angularjs de les traiter + Balise ou attributs HTML, mais aussi classes CSS et commentaires HTML + Permet la création de composants réutilisables LES VUES : DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 18
  • 19. + Filtre ou modifie l’affichage des données évaluées + Syntaxe inspirée de linux : caractère pie « | » + Filtres pré-inclus : currency, date, json, lowercase, number, limitTo… LES VUES : FILTRES © SQLI Enterprise – SQLI GROUP | 2015 19 4/4
  • 20. + Le contrôleur est une fonction javascript liée à la vue par la directive ng-controller LES CONTRÔLEURS : FONCTIONNEMENT © SQLI Enterprise – SQLI GROUP | 2015 20 1/2
  • 21. 2/2 + Un scope, c'est un domaine dans lequel des variables peuvent exister + La racine de tous les scopes est le $rootScope + Un objet javaScript + Créé par les directives ng-app, ng-controler et ng-repeat LES CONTRÔLEURS : LE $SCOPE © SQLI Enterprise – SQLI GROUP | 2015 21
  • 22. + Création et configuration + Injection de dépendances © SQLI Enterprise – SQLI GROUP | 2015 22 4LES MODULES
  • 23. + Permet d’encapsuler l’ensemble des éléments d’une application AngularJS + Un module permet de déclarer : directives, controleurs, filtres, constantes et services + Pour créer un module : CRÉATION ET CONFIGURATION © SQLI Enterprise – SQLI GROUP | 2015 23 + L’affectation d’une valeur à la directive ngApp implique le chargement du module déclaré avec cet identifiant + Créer le module demoApp
  • 24. + Basée sur le service $injector : + L’injection des services dans les contrôleurs : + Automatiquement par leur nom : INJECTION DE DÉPENDANCES © SQLI Enterprise – SQLI GROUP | 2015 24 + Explicite : + Bénéfices : + Découplage + Séparation des préoccupations
  • 25. + Convention de nommage, écriture normalisée + Types de directives + Créer ses propres directives + Créer ses propres filtres © SQLI Enterprise – SQLI GROUP | 2015 25 5 LES DIRECTIVES ET LES FILTRES
  • 26. + AngularJS normalise le nom de la derictive en camelCase + une directive dont le nom est myProduct pourra être utilisée avec les différentes orthographes suivantes : CONVENTION DE NOMMAGE, ÉCRITURE NORMALISÉE © SQLI Enterprise – SQLI GROUP | 2015 26 + <my-product> + <data-my-product> + <x-my-product> + <my:product> + <my_product>
  • 27. + Il existe 4 types de directive : TYPES DE DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 27 + Directive de type Element : + Directive de type Attribut : + Directive de type Classe : + Directive de type Commentaire :
  • 28. + Restrict : + E = Element + A = Attribute + C = Classe + M = Comment CRÉER SES PROPRES DIRECTIVES © SQLI Enterprise – SQLI GROUP | 2015 28
  • 29. CRÉER SES PROPRES FILTRES © SQLI Enterprise – SQLI GROUP | 2015 29 + Le nom du filtre + u2713 -> ✓ + u2718 -> ✘ + Création du filtre dans le module myApp : + L’application du filtrer sur le vue :
  • 30. + Présentation du fonctionnement d’AngularJS + L’arbre des scopes © SQLI Enterprise – SQLI GROUP | 2015 30 6 CYCLES DE VIE ET SCOPES
  • 31. + Le navigateur charge le HTML et le transforme en DOM. + AngularJS attend l’évènement DOMContentLoaded, puis cherche une directive nommée ng-app qui définit les frontières de l’application. + Le service d’injection ($injector) est utilisé pour créer le $rootScope et le service $compile qui va compiler le DOM et le lier au $rootScope. + Les éléments dynamiques tels que les expressions sont alors rendus PRÉSENTATION DU FONCTIONNEMENT D’ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 31
  • 32. + Les scopes : des objets qui servent de contexte d'évaluation des expressions contenues dans les templates L’ARBRE DES SCOPES © SQLI Enterprise – SQLI GROUP | 2015 32
  • 33. + Les services natifs + Les values et constant + Factory, Service et Provider © SQLI Enterprise – SQLI GROUP | 2015 33 7LES SERVICES ANGULARJS
  • 34. LES SERVICES NATIFS © SQLI Enterprise – SQLI GROUP | 2015 34 + Singletons nommés qui vont fournir une tâche précise + Ils peuvent être ensuite injectés dans un contrôleur ou un autre service + Chargés uniquement si besoin (lazy load) + AngularJS propose plusieurs méthodes pour créer un service : + module.provider() + module.service() + module.factory() + module.value() + module.constant() 1/2
  • 35. + $document : LES SERVICES NATIFS © SQLI Enterprise – SQLI GROUP | 2015 35 + $location : + $log : 2/2
  • 36. 1/3 + Techniquement, un service, une factory ou un provider, ça sert à la même chose + Un service est une manière plus facile d’écrire une factory, qui est une manière plus simple d’écrire un provider + Provider : FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 36 + La manière la plus configurable de créer un service + Son rôle principl, c’est de créer et mettre à disposition un objet
  • 37. 2/3 + Factory : FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 37 + Un raccourci pour écrire un provider + Pas de méthode $get à écrire
  • 38. 3/3 + Service : FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 38 + La fonction va être utilisée directement (avec new) pour créer l’objet + Pas besoin de return, on attache tout à this + Le choix entre une factory et un service est vraiment une question de goût
  • 39. 1/3 + Plus simplifiée que les service et factory, car son second paramètre est directement l'instance du service à publier + il ne peut pas bénéficier d'injection d'autres services + AngularJS créé automatiquement un provider, mais qui ne fera que renvoyer l'instance préexistante du service LES VALUES ET CONSTANT © SQLI Enterprise – SQLI GROUP | 2015 39 + value:
  • 40. 2/3 + Comme value, l'instance du service est un objet existant avant l'appel de la méthode constant + La méthode constant enregistre aussi cet objet comme étant un provider, sous le même nom que le service donc sans le suffixe 'Provider LES VALUES ET CONSTANT © SQLI Enterprise – SQLI GROUP | 2015 40 + Constant :
  • 41. 3/3 FACTORY, SERVICE ET PROVIDER © SQLI Enterprise – SQLI GROUP | 2015 41
  • 42. + Le service « $http » + Le service « $resource » + L’API de promise © SQLI Enterprise – SQLI GROUP | 2015 42 8AJAX ET REST
  • 43. + un service bas niveau qui encapsule les appels HTTP via XMLHttpRequest ou JSONP + $http.get : une requete HTTP de type GET + $http.head : une requete HTTP de type HEAD + $http.post : une requete HTTP de type POST + $http.put : une requete HTTP de type PUT + $http.jsonp : une requete HTTP avec JSONP comme format de retour LE SERVICE « $HTTP » © SQLI Enterprise – SQLI GROUP | 2015 43
  • 44. + Un service haut niveau dédié à l’appel d’API REST + La ressource propose les méthodes get(), query(), save(), et delete() + $resource n’est pas inclus par défaut dans le framwork AngularJS LE SERVICE « $RESOURCE » © SQLI Enterprise – SQLI GROUP | 2015 44
  • 45. + Une promise : un objet représentant le résultat futur d’une action exécutée de manière asynchrone + L’API de promise utilisée dans AngularJS par le biais de ses services : $http, $resource … L’API DE PROMISE © SQLI Enterprise – SQLI GROUP | 2015 45 + Les services $http et $resource exposent des fonctions supplémentaires plus pratiques :
  • 46. + Quelques directives AngularJS + SPA (Single Page Application) + Bonnes pratiques + Outils de debug : ng-instpector, Batarang © SQLI Enterprise – SQLI GROUP | 2015 46 9ALLER PLUS LOIN
  • 47. BINDING + Ng-app + Ng-controller QUELQUES DIRECTIVES ANGULARJS © SQLI Enterprise – SQLI GROUP | 2015 47 + Ng-disabled + Ng-hide + Ng-show + Ng-repeat + Ng-switch + Ng-change + Ng-checked + Ng-click + Ng-href + Ng-selected + Ng-minlength + Ng-maxlength + Ng-required + Ng-list + Ng-option + Ng-submit TEMPLATE OPÉRATION FORMULAIREAPPLICATION + Ng-init + Ng-bind + Ng-model + Ng-style
  • 48. + Une application web accessible via une page web unique afin d’éviter le chargement d’une nouvelle page à chaque action demandée + Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page mais le contenu est modifié au fur et à mesure selon les requêtes + Configurer l’affichage des différentes pages : + Définir les routes : SPA (SINGLE PAGE APPLICATION) © SQLI Enterprise – SQLI GROUP | 2015 48 + Définir l’endroit où se “rendra” la vue :
  • 49. + Avant d’utiliser une méthode fournie par jQuery, demandez vous toujours si AngularJS ne propose pas une solution. + Il faut préférer les directives AngularJS au directives HTML : BONNES PRATIQUES © SQLI Enterprise – SQLI GROUP | 2015 49 + Il faut toujours utiliser « track by » dans les directive ngRepeat : + Ne pas oublier le principe SRP au moment de création des services + Single Responsibility
  • 50. BONNES PRATIQUES © SQLI Enterprise – SQLI GROUP | 2015 50 + Un unique contrôleur pour toute l’application + Code dupliqué dans les différents contrôleur + Manipulation directe du DOM en dehors des directives + Code complexe dans les expressions et non dans le contrôleur + Je met un gros conteneur avec tout dedans et tout le monde y accède + Non respect des bonnes pratiques :
  • 51. + ng-inspector : un plugin chrome pour étudier les scopes AngularJS, il affiche les scopes sous forme arborescente. + Batarang : un plugin chrome pour faciliter le debuggage des applications. OUTILS DE DEBUG © SQLI Enterprise – SQLI GROUP | 2015 51 ng-inspector Batarang
  • 52. + AngularJS & Accélérateur B2B Hybris (PowerTools) © SQLI Enterprise – SQLI GROUP | 2015 52 10DÉMONSTRATION
  • 53. MERCI POUR VOTRE ATTENTION © SQLI Enterprise – SQLI GROUP | 2015 53