SlideShare une entreprise Scribd logo
1  sur  15
Comprendre AngularJS
en 10 minutes
Le web : afficher des pages
Navigateur Serveur
HTTP (url)
HTML + CSS + JS
HTTP (url)
HTML + CSS + JS
De la page à l'application web
Navigateur Serveur
HTTP (url)
HTML + CSS + JS
Sessions
Mailing
Persistence
Web services
Navigation
Templating
Vues
etc
HTTP (url)
HTML + CSS + JS
Les applications web
Navigateur Serveur
HTTP (url)
HTML + CSS + JS
Sessions
Mailing
Persistence
Web services
etc
HTTP (url)
HTML + CSS + JS
Navigation
Templating
Vues
Les frameworks Javascript MVC
EmberJS
AngularJS
- Developpé par Google
- Maximiser la testabilité, la maintenance, la
réutilisabilité
Comprendre AngularJS
seulement 5 notions
routeur
controleur
service
filtre
directive
Démarrer un projet AngularJS
index.html
<html ng-app="myApp">
(...)
<script src="(...)/angular.js"></script>
</html>
Démarrer un projet AngularJS
index.html
<html ng-app="myApp">
(...)
<script src="(...)/angular.js"/>
<script src="(...)/app.js"/>
<script src="(...)/controllers.js">
<script src="(...)/services.js">
<script src="(...)/filters.js">
<script src="(...)/directives.js">
</html>
Comprendre AngularJS
le routeur
Comprendre AngularJS
le contrôleur
Comprendre AngularJS
le service
Comprendre AngularJS
le filtre
Comprendre AngularJS
la directive
Les avantages / inconvénients
+ intuitif
+ très facile de démarrer
+ très facile à tester
+ favorise la réutilisation des composants
+ très large communauté
- Pas le plus performant
- Ecrire des directives peut être difficile

Contenu connexe

Tendances

Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the futureOuadie LAHDIOUI
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
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
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptxEsokia
 
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
 
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
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTtayebbousfiha1
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsOLBATI
 
Angular Material Design
Angular Material DesignAngular Material Design
Angular Material DesignSofien AZOUZI
 

Tendances (20)

Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
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
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
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
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Angular Material Design
Angular Material DesignAngular Material Design
Angular Material Design
 

En vedette

Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JSAntoine Rey
 
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logiciel
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logicielASFWS 2011 : Les exigences PCI-DSS en terme de développement logiciel
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logicielCyber Security Alliance
 
Sécurité des applications Web
Sécurité des applications WebSécurité des applications Web
Sécurité des applications WebKlee Group
 
Les 10 principales menaces de sécurité des bases de données
Les 10 principales menaces de sécurité des bases de donnéesLes 10 principales menaces de sécurité des bases de données
Les 10 principales menaces de sécurité des bases de donnéesImperva
 
Les 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASPLes 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASPyaboukir
 
Plan de reprise d’activité
Plan de reprise d’activitéPlan de reprise d’activité
Plan de reprise d’activitéExam PM
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScriptKristen Le Liboux
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)guicara
 
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan Marcil
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan MarcilASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan Marcil
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan MarcilCyber Security Alliance
 
Les principales failles de sécurité des applications Web actuelles
Les principales failles de sécurité des applications Web actuellesLes principales failles de sécurité des applications Web actuelles
Les principales failles de sécurité des applications Web actuellesXavier Kress
 
PRA et PCA : plans de reprise et de continuité d'activité
 PRA et PCA : plans de reprise et de continuité d'activité PRA et PCA : plans de reprise et de continuité d'activité
PRA et PCA : plans de reprise et de continuité d'activitéChristophe Casalegno
 
Presentation des failles_de_securite
Presentation des failles_de_securitePresentation des failles_de_securite
Presentation des failles_de_securiteBorni Dhifi
 
Proyecto NORMALIZACION 5IM2
Proyecto NORMALIZACION 5IM2Proyecto NORMALIZACION 5IM2
Proyecto NORMALIZACION 5IM2vitacandi
 
Cambios en la accion docente
Cambios en la accion docenteCambios en la accion docente
Cambios en la accion docenteSANDRA ROJAS
 

En vedette (20)

Prismic
PrismicPrismic
Prismic
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
 
Résumé javascript
Résumé javascriptRésumé javascript
Résumé javascript
 
Apache Open SSL
Apache Open SSLApache Open SSL
Apache Open SSL
 
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logiciel
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logicielASFWS 2011 : Les exigences PCI-DSS en terme de développement logiciel
ASFWS 2011 : Les exigences PCI-DSS en terme de développement logiciel
 
Sécurité des applications Web
Sécurité des applications WebSécurité des applications Web
Sécurité des applications Web
 
Les 10 principales menaces de sécurité des bases de données
Les 10 principales menaces de sécurité des bases de donnéesLes 10 principales menaces de sécurité des bases de données
Les 10 principales menaces de sécurité des bases de données
 
Les 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASPLes 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASP
 
Plan de reprise d’activité
Plan de reprise d’activitéPlan de reprise d’activité
Plan de reprise d’activité
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan Marcil
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan MarcilASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan Marcil
ASFWS 2012 - Les utilités d’un pare-feu applicatif Web (WAF) par Jonathan Marcil
 
Les principales failles de sécurité des applications Web actuelles
Les principales failles de sécurité des applications Web actuellesLes principales failles de sécurité des applications Web actuelles
Les principales failles de sécurité des applications Web actuelles
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
PRA et PCA : plans de reprise et de continuité d'activité
 PRA et PCA : plans de reprise et de continuité d'activité PRA et PCA : plans de reprise et de continuité d'activité
PRA et PCA : plans de reprise et de continuité d'activité
 
Presentation des failles_de_securite
Presentation des failles_de_securitePresentation des failles_de_securite
Presentation des failles_de_securite
 
Proyecto NORMALIZACION 5IM2
Proyecto NORMALIZACION 5IM2Proyecto NORMALIZACION 5IM2
Proyecto NORMALIZACION 5IM2
 
Bd europe
Bd europeBd europe
Bd europe
 
Services TI gérés
Services TI gérésServices TI gérés
Services TI gérés
 
Cambios en la accion docente
Cambios en la accion docenteCambios en la accion docente
Cambios en la accion docente
 

Similaire à comprendre angularJS en 10 minutes

SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO CAMP
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnementDw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnementCERTyou Formation
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5Mohamed Nemili
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Microsoft
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10davrous
 
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
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSSébastien Ollivier
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon
 
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...CERTyou Formation
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4CERTyou Formation
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3CERTyou Formation
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorArthurMaroulier
 

Similaire à comprendre angularJS en 10 minutes (20)

SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnementDw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
 
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
[TechDays 2012] : Quoi de neuf dans ASP.NET 4.5
 
Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
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
 
Frameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MSFrameworks JavaScript en environnement MS
Frameworks JavaScript en environnement MS
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...
M10264 formation-developper-des-applications-web-avec-microsoft-visual-studio...
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Prezentare ASP.Net.pptx
Prezentare ASP.Net.pptxPrezentare ASP.Net.pptx
Prezentare ASP.Net.pptx
 
ngParis - Rendu cote serveur
ngParis - Rendu cote serveurngParis - Rendu cote serveur
ngParis - Rendu cote serveur
 
M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
 

comprendre angularJS en 10 minutes