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évelop...
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 
Promo...
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>...
Databinding 
Mise à jour automatique 
<div> 
Bonjour {{unPrenom}}, 
</div> 
dans les 2 sens 
var unPrenom = "Rossi"; 
HTML...
Injection de dépendances 
var monModule = angular.module("monModule",["module1", 
"module2"]); 
function ($scope, $window,...
Extension HTML 
<div> 
<ma-balise></ma-balise> 
<div mon-attribut="super"></div> 
<div class="maClasseSpeciale"></div> 
<!...
Composants clés 
Filter 
Controller 
Directive 
Module 
Service 
Template 
HTML 
Javascript 
Javascript 
Javascript 
Javas...
Module 
var monModule = angular.module("monModule", ["ngRoute", 
"unAutreModule"]); 
Javascript
Service* 
monModule.factory("monService", function() { 
return { 
rechercher : function() {…}, 
enregistrer : function() {...
Quelques services AngularJS 
$http 
$log 
$location 
$window 
$document 
$rootScope 
$rootElement 
$exceptionHandler 
$cac...
Controller 
monModule.controller( 
'monController', 
function($scope, $window, monService) { 
$scope.monModel = {nom : 'Pi...
Filter 
app.filter('monFiltre', function () { 
return function (input) { 
return //résultat du traitement ; 
} 
}); 
Javas...
Quelques filtres AngularJS 
orderBy 
number 
upperCase 
lowerCase 
json 
filter 
date
Directives 
app.directive('cbpDirective', function () { 
return { 
restrict: 'EA', 
replace: true, 
template : '<div>…</di...
Quelques directives AngularJS 
Application 
ng-app 
ng-controller 
Template Opération Formulaire 
ng-pattern 
ng-minlength...
Directives & Validateurs HTML 
Validateur Format Exemple (ngRepeat) 
Aucun namespace-name ng-repeat=item in items 
XML nam...
AngularJS c’est aussi… 
Des utilitaires Des modules 
angular.copy 
angular.equals 
angular.forEach 
angular.isArray 
angul...
La démo
Prochain SlideShare
Chargement dans…5
×

Introduction à Angularjs

1 288 vues

Publié le

Une petite introduction à AngularJS

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 288
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
62
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à Angularjs

  1. 1. Introduction à @rossioddet
  2. 2. Miško Hevery 2009
  3. 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. 4. Miško Hevery Le défi Refaire l’équivalent des 6 mois de travail en 2 semaines
  5. 5. Miško Hevery Pari perdu !
  6. 6. Miško Hevery 3 semaines 1 500 lignes de codes
  7. 7. La machine Google Refonte du projet Google Feedback AngularJS devient open source Des centaines de contributeurs Promotion, Promotion, Promotion
  8. 8. Le 13/02/2014
  9. 9. SPA (Single Page Application)
  10. 10. Librairie vs Framework
  11. 11. Librairie vs Framework
  12. 12. AngularJS = framework pour SPA
  13. 13. Concepts clés Templating côté client Pattern MVC* Databinding Injection de dépendances Extension du HTML
  14. 14. Pattern MVC* côté client Vue HTML Modèle Contrôleur Javascript Javascript Front-end Back-end HTTP
  15. 15. Templating côté client <div> Bonjour {{unPrenom}}, javascript est ton ami :) <div ng-include="views/footer.html"></div> </div> HTML
  16. 16. Databinding Mise à jour automatique <div> Bonjour {{unPrenom}}, </div> dans les 2 sens var unPrenom = "Rossi"; HTML Javascript
  17. 17. Injection de dépendances var monModule = angular.module("monModule",["module1", "module2"]); function ($scope, $window, monService) { // Utilisation de composant sans les instancier }
  18. 18. Extension HTML <div> <ma-balise></ma-balise> <div mon-attribut="super"></div> <div class="maClasseSpeciale"></div> <!-- monCommentaireSpecial --> </div> HTML
  19. 19. Composants clés Filter Controller Directive Module Service Template HTML Javascript Javascript Javascript Javascript Javascript | $scope HTML Module Module
  20. 20. Module var monModule = angular.module("monModule", ["ngRoute", "unAutreModule"]); Javascript
  21. 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. 22. Quelques services AngularJS $http $log $location $window $document $rootScope $rootElement $exceptionHandler $cacheFactory $filter
  23. 23. Controller monModule.controller( 'monController', function($scope, $window, monService) { $scope.monModel = {nom : 'Pierre'}; } Javascript HTML <div ng-controller="monController"></div>
  24. 24. Filter app.filter('monFiltre', function () { return function (input) { return //résultat du traitement ; } }); Javascript HTML {{ maVariable | monFiltre }}
  25. 25. Quelques filtres AngularJS orderBy number upperCase lowerCase json filter date
  26. 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. 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. 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. 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
  30. 30. La démo

×