Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction à Angularjs

1,527 views

Published on

Une petite introduction à AngularJS

Published in: Technology
  • Be the first to comment

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

×