SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
Introduction à 
Paterne Gaye 
@ptngaye 
2014-09-30 Introduction à AngularJS
AngularJS : un framework web 
⦿Un framework web 
⦿ Templating + Routage 
⦿ Dialogue avec les services du back-end 
⦿ MCV / MVVM 
⦿ Un framework web Javascript & front-end 
⦿ AngularJS s’exécute dans le navigateur 
⦿ Controlleurs + Model en Javascript 
⦿Développement de SPA 
2014-09-30 Introduction à AngularJS
Planning de la soirée 
⦿Une première application AngularJS 
⦿ Extension du langage HTML : les directives 
⦿ Vues, scopes et data-binding 
⦿ Structure du code avec AngularJS 
⦿Appels asynchrones au back-end 
⦿ Injection de dépendances et tests 
⦿ Points à surveiller 
2014-09-30 Introduction à AngularJS
Préambule 
⦿ Framework 100% Javascript vs Frameworks 
PHP/Java/Flash/SilverLight.. 
⦿ Un langage déjà présent dans “tous” les navigateurs 
● => Pas de plugin 
⦿ Avec les frameworks “server side”, JSF, Struts etc., 
on fini toujours par rajouter du code Javascript 
● =>Code fragmenté en plusieurs langages 
⦿Navigateurs plus puissants que jamais 
● =>Décharger le serveur en exploitant la puissance du 
client 
2014-07-10 Introduction à AngularJS
Une première application AngularJS 
2014-07-10 Introduction à AngularJS
Une application AngularJS 
2014-07-10 Introduction à AngularJS
Une application AngularJS 
2014-07-10 Introduction à AngularJS
Extension du langage HTML 
2014-07-10 Introduction à AngularJS
Qu’est-ce qu’une directive ? 
⦿Une directive = Flag placé dans la vue 
⦿Une directive = Elément | Attribut | 
commentaire HTML | Classe CSS 
⦿Les navigateurs ne reconnaissent pas ces 
flags : c’est à AngularJS de les traiter 
⦿Une directive => un script JS indiquant le 
traitement que AngularJS doit effectuer 
2014-07-10 Introduction à AngularJS
Le compilateur HTML 
2014-07-10 Introduction à AngularJS
Exemple de directive 
⦿ Use case : 
⦿ Un bouton de commande qui demande une 
confirmation 
⦿ La vue 
<soat-confirmation-button 
action=”doVeryDangerousAction” 
message=”Opération est irréversible. Continuer ?” /> 
⦿ Le traitement associé 
⦿ le script soat-confirmation-button.js 
2014-07-10 Introduction à AngularJS
Exemple de directive 
2014-07-10 Introduction à AngularJS
Directives : quand les utilser ? 
⦿Comment savoir qu’on a besoin d’une 
directive ? 
⦿Envie irrésistible de parsing du DOM 
⦿Un bloc de HTML qui se répète 
⦿Composant de formulaire : calendrier, zone de saisie 
... 
⦿ Attention à vérifier d’abord les directives 
natives de Angular ou de la communauté 
2014-07-10 Introduction à AngularJS
Vues, scopes et data-binding 
2014-07-10 Introduction à AngularJS
Scope 
⦿ Scope = contexte d’évaluation des expressions 
AngularJS 
⦿ un scope = un objet Javascript 
⦿ Hiérachie de scope : 
⦿ $rootScope le scope de 1er niveau rattaché à ng-app 
⦿ Scope propres à ng-controller 
2014-07-10 Introduction à AngularJS
La fonction $watch du scope 
2014-07-10 Introduction à AngularJS
Contenu d’une vue AngularJS 
⦿ Le code HTML classique 
⦿ Les directives 
⦿ Les expressions AngularJS 
⦿ Instruction qui va etre interprété par AngularJS 
⦿ A l’intérieur des doubles accolades {{}} 
⦿ comme valeurs des directives 
⦿ Les filtres 
⦿ Fonction qui transforme un objet en un autre 
2014-07-10 Introduction à AngularJS
Binding 
2014-07-10 Introduction à AngularJS
Structure d’une application AngularJS 
2014-07-10 Introduction à AngularJS
Directives vs Controllers vs Services 
⦿ Directives 
⦿ Manipulation de DOM 
⦿ Composants IHM re-utilisables 
⦿ Les services 
⦿ Dialogue avec le back-end/appels HTTP 
⦿ Code métier 
⦿ Traitement partagés par plusieurs contrôleurs 
⦿ Services natifs préfixés ‘$’ 
2014-07-10 Introduction à AngularJS
Directives vs Controllers vs Services 
⦿ Controlleurs 
⦿ Gestion du scope attaché à une vue 
⦿ Gestion des actions utilisateurs 
⦿ Les filtres 
⦿ Conversion d’un objet en un autre 
⦿Exemple : le filtre currency 
2014-07-10 Introduction à AngularJS
La définition des routes 
2014-07-10 Introduction à AngularJS
Appels asynchrones au back-end 
2014-07-10 Introduction à AngularJS
Exemples de use cases 
⦿ Cas #1 : agrégateur de news 
⦿Interroger Twitter, Google+ et Facebook 
⦿Fusionner les trois flux afin d’avoir un flux 
unique 
⦿ Cas #2 : afficher le détail d’un client 
⦿Récupérer les infos usuelles dans SAP via un WS 
⦿Récupérer des infos additionnels d’une seconde 
BD via un WS 
2014-07-10 Introduction à AngularJS
Notion de callback 
⦿ Callback = fonction 
⦿Etant donnée une fonction F, on peut rajouter à F 
un argument supplémentaire qui est une fonction a 
exécuter en fin de traitement. 
⦿ Cas d’un enchaînement d’appels asynchrones: 
code illisible / enfer des callback 
⦿ Solution au callback-hell : les promesses 
⦿Une promesse = Résultat d’un traitement 
asynchrone 
2014-07-10 Introduction à AngularJS
Les promesses avec AngularJS 
2014-07-10 Introduction à AngularJS
Injection de dépendances et tests 
2014-07-10 Introduction à AngularJS
Injection des dépendances 
2014-07-10 Introduction à AngularJS
Tests 
⦿ Tests unitaires 
⦿Injection de dépendances 
● On peut mocker facilement les différentes parties de 
l’application 
● On peut donc tester unitairement 
2014-07-10 Introduction à AngularJS
Tests : les outils 
⦿ Les tests s’exécutent sur la machine de dev 
⦿Outil pour exécuter le code Javascript coté serveur 
● => NodeJs 
⦿Outil JUnit-like pour écrire les tests 
● => Mocha, Jasmine, QUnit 
⦿Runner pour exécuter les tests 
● => +1 Karma 
⦿Les tests end-2end 
⦿Manipuler le browser via webdriver 
● => Protractor 
⦿Alternatives à Selenium/Protractor 
● => Casper par exemple 
2014-07-10 Introduction à AngularJS
Points à surveiller 
2014-09-30 Introduction à AngularJS
Attention !!! 
⦿ Limites du binding : mémoire (2000 binding ?) 
⦿ Pérénité du projet : Google 
⦿ Javascript indispensable 
⦿ Non respect des bonnes pratiques 
⦿Un unique controller pour toute l’application 
⦿Code dupliqué dans les différents controllers 
⦿Manipulation directe du DOM en dehors des 
directives 
⦿Code complexe dans les expressions et non dans le 
controller 
2014-09-30 Introduction à AngularJS
Outils et documentation 
2014-07-10 Introduction à AngularJS
Outils 
⦿IDE desktop 
⦿IDE supportant Javascript 
⦿+1 pour WebStorm (44 € par an) 
⦿Les navigateurs 
⦿Mode developpeur 
⦿ Cas du navigateur : Plugin Batarang 
⦿Apparemment très utile 
2014-09-30 Introduction à AngularJS
Documentation 
⦿Doc en ligne 
⦿https://angularjs.org/ 
⦿http://goo.gl/EPvajM le groupe Google+ 
francophone 
⦿http://www.frangular.com/ 
⦿Livres 
⦿“Devenez un ninja avec AngularJS” de Ninja Squad 
⦿+1 AngularJS de Brad Green et Shyam Seshadri 
2014-09-30 Introduction à AngularJS
2014-09-30 Introduction à AngularJS

Contenu connexe

Tendances

Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the futureOuadie LAHDIOUI
 
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
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Angluars js
Angluars jsAngluars js
Angluars jsRYMAA
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
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
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
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
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsOLBATI
 
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
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 

Tendances (20)

Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
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
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
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
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365Introduction à AngularJS dans un contexte Office365
Introduction à AngularJS dans un contexte Office365
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 

En vedette

A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 
Guide hébergement 2015 en Côte Landes Nature
Guide hébergement 2015 en Côte Landes NatureGuide hébergement 2015 en Côte Landes Nature
Guide hébergement 2015 en Côte Landes NatureSabine C
 
United States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHUnited States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHVogelDenise
 
Formation réseaux sociaux – Commerce et Ecommerce
Formation réseaux sociaux – Commerce et EcommerceFormation réseaux sociaux – Commerce et Ecommerce
Formation réseaux sociaux – Commerce et EcommerceL'Autre Média - Formation
 
Partir à la découverte de l’art lyonnais
Partir à la découverte de l’art lyonnaisPartir à la découverte de l’art lyonnais
Partir à la découverte de l’art lyonnaisamelieetpauline
 
Salut! je m´appelle
Salut! je m´appelleSalut! je m´appelle
Salut! je m´appelleCarol Guedes
 
projet sparte alexandre atlan
projet sparte alexandre atlanprojet sparte alexandre atlan
projet sparte alexandre atlanclimberboy1999
 
Compu Traing
Compu TraingCompu Traing
Compu TraingRrrr10
 
La gestion des actifs d'entreprise pour des bâtiments plus intelligents
La gestion des actifs d'entreprise pour des bâtiments plus intelligentsLa gestion des actifs d'entreprise pour des bâtiments plus intelligents
La gestion des actifs d'entreprise pour des bâtiments plus intelligentsSolutions IT et Business
 
Le savant mélange d'une image de marque et du style moderne
Le savant mélange d'une image de marque et du style moderneLe savant mélange d'une image de marque et du style moderne
Le savant mélange d'une image de marque et du style moderneSOAT
 
Scrumday 2015 : La horde Agile par Pablo Pernot
Scrumday 2015 : La horde Agile par Pablo PernotScrumday 2015 : La horde Agile par Pablo Pernot
Scrumday 2015 : La horde Agile par Pablo PernotFrench Scrum User Group
 
Playtests, traductions, et relectures
Playtests, traductions, et relectures  Playtests, traductions, et relectures
Playtests, traductions, et relectures Pascal Minoche
 
But déploie une stratégie de conquête cross-canal et renforce sa position sur...
But déploie une stratégie de conquête cross-canal et renforce sa position sur...But déploie une stratégie de conquête cross-canal et renforce sa position sur...
But déploie une stratégie de conquête cross-canal et renforce sa position sur...Solutions IT et Business
 

En vedette (20)

A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 
Wake Up Multi
Wake Up MultiWake Up Multi
Wake Up Multi
 
Guide hébergement 2015 en Côte Landes Nature
Guide hébergement 2015 en Côte Landes NatureGuide hébergement 2015 en Côte Landes Nature
Guide hébergement 2015 en Côte Landes Nature
 
United States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCHUnited States of America – IMMIGRATION REFORM - FRENCH
United States of America – IMMIGRATION REFORM - FRENCH
 
Formation réseaux sociaux – Commerce et Ecommerce
Formation réseaux sociaux – Commerce et EcommerceFormation réseaux sociaux – Commerce et Ecommerce
Formation réseaux sociaux – Commerce et Ecommerce
 
Pitch1 lumen
Pitch1 lumenPitch1 lumen
Pitch1 lumen
 
Partir à la découverte de l’art lyonnais
Partir à la découverte de l’art lyonnaisPartir à la découverte de l’art lyonnais
Partir à la découverte de l’art lyonnais
 
Salut! je m´appelle
Salut! je m´appelleSalut! je m´appelle
Salut! je m´appelle
 
projet sparte alexandre atlan
projet sparte alexandre atlanprojet sparte alexandre atlan
projet sparte alexandre atlan
 
Compu Traing
Compu TraingCompu Traing
Compu Traing
 
La gestion des actifs d'entreprise pour des bâtiments plus intelligents
La gestion des actifs d'entreprise pour des bâtiments plus intelligentsLa gestion des actifs d'entreprise pour des bâtiments plus intelligents
La gestion des actifs d'entreprise pour des bâtiments plus intelligents
 
Le savant mélange d'une image de marque et du style moderne
Le savant mélange d'une image de marque et du style moderneLe savant mélange d'une image de marque et du style moderne
Le savant mélange d'une image de marque et du style moderne
 
Scrumday 2015 : La horde Agile par Pablo Pernot
Scrumday 2015 : La horde Agile par Pablo PernotScrumday 2015 : La horde Agile par Pablo Pernot
Scrumday 2015 : La horde Agile par Pablo Pernot
 
Durban p2 k.f. seddoh
Durban p2 k.f. seddohDurban p2 k.f. seddoh
Durban p2 k.f. seddoh
 
Playtests, traductions, et relectures
Playtests, traductions, et relectures  Playtests, traductions, et relectures
Playtests, traductions, et relectures
 
Cy35558564
Cy35558564Cy35558564
Cy35558564
 
Loft à Paris , 4 chambres, 1540000 euros
Loft à Paris , 4 chambres, 1540000 eurosLoft à Paris , 4 chambres, 1540000 euros
Loft à Paris , 4 chambres, 1540000 euros
 
Dompter Google
Dompter GoogleDompter Google
Dompter Google
 
But déploie une stratégie de conquête cross-canal et renforce sa position sur...
But déploie une stratégie de conquête cross-canal et renforce sa position sur...But déploie une stratégie de conquête cross-canal et renforce sa position sur...
But déploie une stratégie de conquête cross-canal et renforce sa position sur...
 

Similaire à Angular JS - Paterne Gaye-Guingnido

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 Horacio Gonzalez
 
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
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Ippon
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...DEFO KUATE Landry
 
Le service workers
Le service workersLe service workers
Le service workersneuros
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppSébastien Ollivier
 
Google Cloud Endpoints - DevFest - Nantes 2012
Google Cloud Endpoints -  DevFest - Nantes 2012Google Cloud Endpoints -  DevFest - Nantes 2012
Google Cloud Endpoints - DevFest - Nantes 2012Maxime Gréau
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinThierry Buisson
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Sébastien Ollivier
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe Didiergeorges
 
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
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsOCTO Technology
 
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIsPetit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIsJonathan Meiss
 

Similaire à Angular JS - Paterne Gaye-Guingnido (20)

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
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
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Angular 11
Angular 11Angular 11
Angular 11
 
Angular retro
Angular retroAngular retro
Angular retro
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
 
Le service workers
Le service workersLe service workers
Le service workers
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Google Cloud Endpoints - DevFest - Nantes 2012
Google Cloud Endpoints -  DevFest - Nantes 2012Google Cloud Endpoints -  DevFest - Nantes 2012
Google Cloud Endpoints - DevFest - Nantes 2012
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
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...
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
 
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIsPetit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
 

Plus de SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
Présentation spring data Matthieu Briend
Présentation spring data  Matthieu BriendPrésentation spring data  Matthieu Briend
Présentation spring data Matthieu BriendSOAT
 
Je suis agile tout seul - Ricardo Minhoto
Je suis agile tout seul - Ricardo MinhotoJe suis agile tout seul - Ricardo Minhoto
Je suis agile tout seul - Ricardo MinhotoSOAT
 
Facilitez vous la vie - Ricardo Minhoto
Facilitez vous la vie - Ricardo MinhotoFacilitez vous la vie - Ricardo Minhoto
Facilitez vous la vie - Ricardo MinhotoSOAT
 
Play : Premiers pas par l'exemple le 120613
Play : Premiers pas par l'exemple le 120613Play : Premiers pas par l'exemple le 120613
Play : Premiers pas par l'exemple le 120613SOAT
 

Plus de SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
Présentation spring data Matthieu Briend
Présentation spring data  Matthieu BriendPrésentation spring data  Matthieu Briend
Présentation spring data Matthieu Briend
 
Je suis agile tout seul - Ricardo Minhoto
Je suis agile tout seul - Ricardo MinhotoJe suis agile tout seul - Ricardo Minhoto
Je suis agile tout seul - Ricardo Minhoto
 
Facilitez vous la vie - Ricardo Minhoto
Facilitez vous la vie - Ricardo MinhotoFacilitez vous la vie - Ricardo Minhoto
Facilitez vous la vie - Ricardo Minhoto
 
Play : Premiers pas par l'exemple le 120613
Play : Premiers pas par l'exemple le 120613Play : Premiers pas par l'exemple le 120613
Play : Premiers pas par l'exemple le 120613
 

Angular JS - Paterne Gaye-Guingnido

  • 1. Introduction à Paterne Gaye @ptngaye 2014-09-30 Introduction à AngularJS
  • 2. AngularJS : un framework web ⦿Un framework web ⦿ Templating + Routage ⦿ Dialogue avec les services du back-end ⦿ MCV / MVVM ⦿ Un framework web Javascript & front-end ⦿ AngularJS s’exécute dans le navigateur ⦿ Controlleurs + Model en Javascript ⦿Développement de SPA 2014-09-30 Introduction à AngularJS
  • 3. Planning de la soirée ⦿Une première application AngularJS ⦿ Extension du langage HTML : les directives ⦿ Vues, scopes et data-binding ⦿ Structure du code avec AngularJS ⦿Appels asynchrones au back-end ⦿ Injection de dépendances et tests ⦿ Points à surveiller 2014-09-30 Introduction à AngularJS
  • 4. Préambule ⦿ Framework 100% Javascript vs Frameworks PHP/Java/Flash/SilverLight.. ⦿ Un langage déjà présent dans “tous” les navigateurs ● => Pas de plugin ⦿ Avec les frameworks “server side”, JSF, Struts etc., on fini toujours par rajouter du code Javascript ● =>Code fragmenté en plusieurs langages ⦿Navigateurs plus puissants que jamais ● =>Décharger le serveur en exploitant la puissance du client 2014-07-10 Introduction à AngularJS
  • 5. Une première application AngularJS 2014-07-10 Introduction à AngularJS
  • 6. Une application AngularJS 2014-07-10 Introduction à AngularJS
  • 7. Une application AngularJS 2014-07-10 Introduction à AngularJS
  • 8. Extension du langage HTML 2014-07-10 Introduction à AngularJS
  • 9. Qu’est-ce qu’une directive ? ⦿Une directive = Flag placé dans la vue ⦿Une directive = Elément | Attribut | commentaire HTML | Classe CSS ⦿Les navigateurs ne reconnaissent pas ces flags : c’est à AngularJS de les traiter ⦿Une directive => un script JS indiquant le traitement que AngularJS doit effectuer 2014-07-10 Introduction à AngularJS
  • 10. Le compilateur HTML 2014-07-10 Introduction à AngularJS
  • 11. Exemple de directive ⦿ Use case : ⦿ Un bouton de commande qui demande une confirmation ⦿ La vue <soat-confirmation-button action=”doVeryDangerousAction” message=”Opération est irréversible. Continuer ?” /> ⦿ Le traitement associé ⦿ le script soat-confirmation-button.js 2014-07-10 Introduction à AngularJS
  • 12. Exemple de directive 2014-07-10 Introduction à AngularJS
  • 13. Directives : quand les utilser ? ⦿Comment savoir qu’on a besoin d’une directive ? ⦿Envie irrésistible de parsing du DOM ⦿Un bloc de HTML qui se répète ⦿Composant de formulaire : calendrier, zone de saisie ... ⦿ Attention à vérifier d’abord les directives natives de Angular ou de la communauté 2014-07-10 Introduction à AngularJS
  • 14. Vues, scopes et data-binding 2014-07-10 Introduction à AngularJS
  • 15. Scope ⦿ Scope = contexte d’évaluation des expressions AngularJS ⦿ un scope = un objet Javascript ⦿ Hiérachie de scope : ⦿ $rootScope le scope de 1er niveau rattaché à ng-app ⦿ Scope propres à ng-controller 2014-07-10 Introduction à AngularJS
  • 16. La fonction $watch du scope 2014-07-10 Introduction à AngularJS
  • 17. Contenu d’une vue AngularJS ⦿ Le code HTML classique ⦿ Les directives ⦿ Les expressions AngularJS ⦿ Instruction qui va etre interprété par AngularJS ⦿ A l’intérieur des doubles accolades {{}} ⦿ comme valeurs des directives ⦿ Les filtres ⦿ Fonction qui transforme un objet en un autre 2014-07-10 Introduction à AngularJS
  • 19. Structure d’une application AngularJS 2014-07-10 Introduction à AngularJS
  • 20. Directives vs Controllers vs Services ⦿ Directives ⦿ Manipulation de DOM ⦿ Composants IHM re-utilisables ⦿ Les services ⦿ Dialogue avec le back-end/appels HTTP ⦿ Code métier ⦿ Traitement partagés par plusieurs contrôleurs ⦿ Services natifs préfixés ‘$’ 2014-07-10 Introduction à AngularJS
  • 21. Directives vs Controllers vs Services ⦿ Controlleurs ⦿ Gestion du scope attaché à une vue ⦿ Gestion des actions utilisateurs ⦿ Les filtres ⦿ Conversion d’un objet en un autre ⦿Exemple : le filtre currency 2014-07-10 Introduction à AngularJS
  • 22. La définition des routes 2014-07-10 Introduction à AngularJS
  • 23. Appels asynchrones au back-end 2014-07-10 Introduction à AngularJS
  • 24. Exemples de use cases ⦿ Cas #1 : agrégateur de news ⦿Interroger Twitter, Google+ et Facebook ⦿Fusionner les trois flux afin d’avoir un flux unique ⦿ Cas #2 : afficher le détail d’un client ⦿Récupérer les infos usuelles dans SAP via un WS ⦿Récupérer des infos additionnels d’une seconde BD via un WS 2014-07-10 Introduction à AngularJS
  • 25. Notion de callback ⦿ Callback = fonction ⦿Etant donnée une fonction F, on peut rajouter à F un argument supplémentaire qui est une fonction a exécuter en fin de traitement. ⦿ Cas d’un enchaînement d’appels asynchrones: code illisible / enfer des callback ⦿ Solution au callback-hell : les promesses ⦿Une promesse = Résultat d’un traitement asynchrone 2014-07-10 Introduction à AngularJS
  • 26. Les promesses avec AngularJS 2014-07-10 Introduction à AngularJS
  • 27. Injection de dépendances et tests 2014-07-10 Introduction à AngularJS
  • 28. Injection des dépendances 2014-07-10 Introduction à AngularJS
  • 29. Tests ⦿ Tests unitaires ⦿Injection de dépendances ● On peut mocker facilement les différentes parties de l’application ● On peut donc tester unitairement 2014-07-10 Introduction à AngularJS
  • 30. Tests : les outils ⦿ Les tests s’exécutent sur la machine de dev ⦿Outil pour exécuter le code Javascript coté serveur ● => NodeJs ⦿Outil JUnit-like pour écrire les tests ● => Mocha, Jasmine, QUnit ⦿Runner pour exécuter les tests ● => +1 Karma ⦿Les tests end-2end ⦿Manipuler le browser via webdriver ● => Protractor ⦿Alternatives à Selenium/Protractor ● => Casper par exemple 2014-07-10 Introduction à AngularJS
  • 31. Points à surveiller 2014-09-30 Introduction à AngularJS
  • 32. Attention !!! ⦿ Limites du binding : mémoire (2000 binding ?) ⦿ Pérénité du projet : Google ⦿ Javascript indispensable ⦿ Non respect des bonnes pratiques ⦿Un unique controller pour toute l’application ⦿Code dupliqué dans les différents controllers ⦿Manipulation directe du DOM en dehors des directives ⦿Code complexe dans les expressions et non dans le controller 2014-09-30 Introduction à AngularJS
  • 33. Outils et documentation 2014-07-10 Introduction à AngularJS
  • 34. Outils ⦿IDE desktop ⦿IDE supportant Javascript ⦿+1 pour WebStorm (44 € par an) ⦿Les navigateurs ⦿Mode developpeur ⦿ Cas du navigateur : Plugin Batarang ⦿Apparemment très utile 2014-09-30 Introduction à AngularJS
  • 35. Documentation ⦿Doc en ligne ⦿https://angularjs.org/ ⦿http://goo.gl/EPvajM le groupe Google+ francophone ⦿http://www.frangular.com/ ⦿Livres ⦿“Devenez un ninja avec AngularJS” de Ninja Squad ⦿+1 AngularJS de Brad Green et Shyam Seshadri 2014-09-30 Introduction à AngularJS