SlideShare une entreprise Scribd logo
Introduction à 
@rossioddet
Miško Hevery 
2009
Miško Hevery 
Projet Google Feedback 
6 mois de développement 
17 000 lignes de codes front-end 
Des difficultés à développer et à 
réaliser du code testable
Miško Hevery 
Le défi 
Refaire l’équivalent des 6 mois de 
travail en 2 semaines
Miško Hevery 
Pari perdu !
Miško Hevery 
3 semaines 
1 500 lignes de codes
La machine Google 
Refonte du projet Google Feedback 
AngularJS devient open source 
Des centaines de contributeurs 
Promotion, Promotion, Promotion
Le 13/02/2014
SPA 
(Single Page Application)
Librairie vs Framework
Librairie vs Framework
AngularJS = framework pour SPA
Concepts clés 
Templating côté client 
Pattern MVC* 
Databinding 
Injection de dépendances 
Extension du HTML
Pattern MVC* côté client 
Vue 
HTML 
Modèle 
Contrôleur 
Javascript 
Javascript Front-end 
Back-end 
HTTP
Templating côté client 
<div> 
Bonjour {{unPrenom}}, javascript est ton ami :) 
<div ng-include="views/footer.html"></div> 
</div> 
HTML
Databinding 
Mise à jour automatique 
<div> 
Bonjour {{unPrenom}}, 
</div> 
dans les 2 sens 
var unPrenom = "Rossi"; 
HTML Javascript
Injection de dépendances 
var monModule = angular.module("monModule",["module1", 
"module2"]); 
function ($scope, $window, monService) { 
// Utilisation de composant sans les instancier 
}
Extension HTML 
<div> 
<ma-balise></ma-balise> 
<div mon-attribut="super"></div> 
<div class="maClasseSpeciale"></div> 
<!-- monCommentaireSpecial --> 
</div> 
HTML
Composants clés 
Filter 
Controller 
Directive 
Module 
Service 
Template 
HTML 
Javascript 
Javascript 
Javascript 
Javascript 
Javascript 
| 
$scope 
HTML 
Module 
Module
Module 
var monModule = angular.module("monModule", ["ngRoute", 
"unAutreModule"]); 
Javascript
Service* 
monModule.factory("monService", function() { 
return { 
rechercher : function() {…}, 
enregistrer : function() {…} 
} 
} 
function(monService) { 
monService.rechercher(); 
} 
Javascript 
Javascript 
* Il existe d’autres façons de créer des services
Quelques services AngularJS 
$http 
$log 
$location 
$window 
$document 
$rootScope 
$rootElement 
$exceptionHandler 
$cacheFactory 
$filter
Controller 
monModule.controller( 
'monController', 
function($scope, $window, monService) { 
$scope.monModel = {nom : 'Pierre'}; 
} 
Javascript 
HTML <div ng-controller="monController"></div>
Filter 
app.filter('monFiltre', function () { 
return function (input) { 
return //résultat du traitement ; 
} 
}); 
Javascript 
HTML {{ maVariable | monFiltre }}
Quelques filtres AngularJS 
orderBy 
number 
upperCase 
lowerCase 
json 
filter 
date
Directives 
app.directive('cbpDirective', function () { 
return { 
restrict: 'EA', 
replace: true, 
template : '<div>…</div>', 
… 
}; 
}); 
Javascript 
<cbp-directive><cbp-directive> 
<div cbp-directive="super"></div> HTML
Quelques directives AngularJS 
Application 
ng-app 
ng-controller 
Template Opération Formulaire 
ng-pattern 
ng-minlength 
ng-maxlength 
ng-required 
ng-list 
ng-true-value 
ng-false-value 
ng-option 
ng-submit 
ng-csp 
ng-disabled 
ng-hide 
ng-show 
ng-mouse 
ng-repeat 
ng-switch 
ng-transclude 
ng-view 
ng-change 
ng-checked 
ng-click 
ng-href 
ng-selected 
Binding 
ng-bind 
ng-model 
ng-init 
ng-src 
ng-style
Directives & Validateurs HTML 
Validateur Format Exemple (ngRepeat) 
Aucun namespace-name ng-repeat=item in items 
XML namespace:name ng:repeat=item in items 
HTML5 data-namespace-name data-ng-repeat=item in items 
xHTML x-namespace-name x-ng-repeat=item in items
AngularJS c’est aussi… 
Des utilitaires Des modules 
angular.copy 
angular.equals 
angular.forEach 
angular.isArray 
angular.isDate 
angular.element 
… 
ngAnimate 
ngCookies 
ngMock 
ngResource 
ngRoute 
ngSanitize 
ngTouch 
… 
AngularUI 
UI-Bootstrap 
UI-Router 
NG-Grid 
UI-Alias 
Calendar 
Google Maps 
… 
Des tests 
Unitaire 
Intégration
La démo

Contenu connexe

Tendances

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
Clément Dubois
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
SOAT
 
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
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
Ouadie LAHDIOUI
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
Frédéric DUPERIER
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
Marouan MOHAMED
 
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
Peak Ace
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad
 
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
OCTO Technology
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_thread
Saber LAJILI
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsHugo Hamon
 

Tendances (20)

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Angular 2
Angular 2Angular 2
Angular 2
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
 
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
 
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
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
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
4 asynch task_services_thread
4 asynch task_services_thread4 asynch task_services_thread
4 asynch task_services_thread
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
 

Similaire à Introduction à Angularjs

Web dev open door
Web dev   open doorWeb dev   open door
Web dev open door
LeTesteur
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonyVincent Composieux
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Jean-Laurent de Morlhon
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
MongoDB
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
Julien Giovaresco
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
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
codedarmor
 
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
 
5 android web_service
5 android web_service5 android web_service
5 android web_service
Saber LAJILI
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
ArthurMaroulier
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 

Similaire à Introduction à Angularjs (20)

Web dev open door
Web dev   open doorWeb dev   open door
Web dev open door
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
Ou sont mes beans, contrats et workflows ? WOA et REST: Un changement de ment...
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
Des mises à jour? Emmenez votre application Stitch encore plus loin grâce aux...
 
Développer sereinement avec Node.js
Développer sereinement avec Node.jsDévelopper sereinement avec Node.js
Développer sereinement avec Node.js
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
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
 
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)
 
5 android web_service
5 android web_service5 android web_service
5 android web_service
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 

Plus de Rossi Oddet

BreizhCamp 2015 - D3js par l'exemple
BreizhCamp 2015 - D3js par l'exempleBreizhCamp 2015 - D3js par l'exemple
BreizhCamp 2015 - D3js par l'exemple
Rossi Oddet
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
Rossi Oddet
 
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
Rossi Oddet
 
JCertif 2014 - Techniques & Outils de Productivité
JCertif 2014 - Techniques & Outils de ProductivitéJCertif 2014 - Techniques & Outils de Productivité
JCertif 2014 - Techniques & Outils de Productivité
Rossi Oddet
 
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?Rossi Oddet
 
BreizhCamp 2014 - Ionic in Action (Tools In Action)
BreizhCamp 2014 - Ionic in Action (Tools In Action)BreizhCamp 2014 - Ionic in Action (Tools In Action)
BreizhCamp 2014 - Ionic in Action (Tools In Action)
Rossi Oddet
 
JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?
Rossi Oddet
 
JCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec JenkinsJCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec Jenkins
Rossi Oddet
 
JCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratiqueJCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratique
Rossi Oddet
 
JCertif 2012 : Le lab
JCertif 2012 : Le labJCertif 2012 : Le lab
JCertif 2012 : Le labRossi Oddet
 
JCertif 2012 : Scrum avec Icescrum
JCertif 2012 : Scrum avec IcescrumJCertif 2012 : Scrum avec Icescrum
JCertif 2012 : Scrum avec Icescrum
Rossi Oddet
 
JCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratiqueJCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratique
Rossi Oddet
 

Plus de Rossi Oddet (12)

BreizhCamp 2015 - D3js par l'exemple
BreizhCamp 2015 - D3js par l'exempleBreizhCamp 2015 - D3js par l'exemple
BreizhCamp 2015 - D3js par l'exemple
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
DevFest Nantes 2014 - Keynote - GTD (Getting Things Done)
 
JCertif 2014 - Techniques & Outils de Productivité
JCertif 2014 - Techniques & Outils de ProductivitéJCertif 2014 - Techniques & Outils de Productivité
JCertif 2014 - Techniques & Outils de Productivité
 
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?
 
BreizhCamp 2014 - Ionic in Action (Tools In Action)
BreizhCamp 2014 - Ionic in Action (Tools In Action)BreizhCamp 2014 - Ionic in Action (Tools In Action)
BreizhCamp 2014 - Ionic in Action (Tools In Action)
 
JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?
 
JCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec JenkinsJCertif 2012 : Integration continue avec Jenkins
JCertif 2012 : Integration continue avec Jenkins
 
JCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratiqueJCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratique
 
JCertif 2012 : Le lab
JCertif 2012 : Le labJCertif 2012 : Le lab
JCertif 2012 : Le lab
 
JCertif 2012 : Scrum avec Icescrum
JCertif 2012 : Scrum avec IcescrumJCertif 2012 : Scrum avec Icescrum
JCertif 2012 : Scrum avec Icescrum
 
JCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratiqueJCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratique
 

Dernier

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Introduction à Angularjs

  • 3. Miško Hevery Projet Google Feedback 6 mois de développement 17 000 lignes de codes front-end Des difficultés à développer et à réaliser du code testable
  • 4. Miško Hevery Le défi Refaire l’équivalent des 6 mois de travail en 2 semaines
  • 6. Miško Hevery 3 semaines 1 500 lignes de codes
  • 7. La machine Google Refonte du projet Google Feedback AngularJS devient open source Des centaines de contributeurs Promotion, Promotion, Promotion
  • 9. SPA (Single Page Application)
  • 13. Concepts clés Templating côté client Pattern MVC* Databinding Injection de dépendances Extension du HTML
  • 14. Pattern MVC* côté client Vue HTML Modèle Contrôleur Javascript Javascript Front-end Back-end HTTP
  • 15. Templating côté client <div> Bonjour {{unPrenom}}, javascript est ton ami :) <div ng-include="views/footer.html"></div> </div> HTML
  • 16. Databinding Mise à jour automatique <div> Bonjour {{unPrenom}}, </div> dans les 2 sens var unPrenom = "Rossi"; HTML Javascript
  • 17. Injection de dépendances var monModule = angular.module("monModule",["module1", "module2"]); function ($scope, $window, monService) { // Utilisation de composant sans les instancier }
  • 18. Extension HTML <div> <ma-balise></ma-balise> <div mon-attribut="super"></div> <div class="maClasseSpeciale"></div> <!-- monCommentaireSpecial --> </div> HTML
  • 19. Composants clés Filter Controller Directive Module Service Template HTML Javascript Javascript Javascript Javascript Javascript | $scope HTML Module Module
  • 20. Module var monModule = angular.module("monModule", ["ngRoute", "unAutreModule"]); Javascript
  • 21. Service* monModule.factory("monService", function() { return { rechercher : function() {…}, enregistrer : function() {…} } } function(monService) { monService.rechercher(); } Javascript Javascript * Il existe d’autres façons de créer des services
  • 22. Quelques services AngularJS $http $log $location $window $document $rootScope $rootElement $exceptionHandler $cacheFactory $filter
  • 23. Controller monModule.controller( 'monController', function($scope, $window, monService) { $scope.monModel = {nom : 'Pierre'}; } Javascript HTML <div ng-controller="monController"></div>
  • 24. Filter app.filter('monFiltre', function () { return function (input) { return //résultat du traitement ; } }); Javascript HTML {{ maVariable | monFiltre }}
  • 25. Quelques filtres AngularJS orderBy number upperCase lowerCase json filter date
  • 26. Directives app.directive('cbpDirective', function () { return { restrict: 'EA', replace: true, template : '<div>…</div>', … }; }); Javascript <cbp-directive><cbp-directive> <div cbp-directive="super"></div> HTML
  • 27. Quelques directives AngularJS Application ng-app ng-controller Template Opération Formulaire ng-pattern ng-minlength ng-maxlength ng-required ng-list ng-true-value ng-false-value ng-option ng-submit ng-csp ng-disabled ng-hide ng-show ng-mouse ng-repeat ng-switch ng-transclude ng-view ng-change ng-checked ng-click ng-href ng-selected Binding ng-bind ng-model ng-init ng-src ng-style
  • 28. Directives & Validateurs HTML Validateur Format Exemple (ngRepeat) Aucun namespace-name ng-repeat=item in items XML namespace:name ng:repeat=item in items HTML5 data-namespace-name data-ng-repeat=item in items xHTML x-namespace-name x-ng-repeat=item in items
  • 29. AngularJS c’est aussi… Des utilitaires Des modules angular.copy angular.equals angular.forEach angular.isArray angular.isDate angular.element … ngAnimate ngCookies ngMock ngResource ngRoute ngSanitize ngTouch … AngularUI UI-Bootstrap UI-Router NG-Grid UI-Alias Calendar Google Maps … Des tests Unitaire Intégration