Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

AngularJS On-Ramp

1 569 vues

Publié le

An introduction to AngularJS. Sample code and the complete PowerPoint file (with complete comments) can be found at: https://github.com/MarkFreedman/AngularJSOnRamp

Updated on 2014-06-06 to update the basic directive example, and to add an advanced example.

Publié dans : Logiciels, Formation, Technologie
  • Soyez le premier à commenter

AngularJS On-Ramp

  1. 1. Dev Storyteller presents: Mark Freedman http://about.com/MarkFreedman
  2. 2. Who Am I to Speak About AngularJS?
  3. 3. Death by DOM Manipulation (jQuery)
  4. 4. What is AngularJS? Miško Hevery & Adam Abrons - 2009 Google Feedback - 2010
  5. 5. Why do I care?
  6. 6. MV Whatever
  7. 7. Getting AngularJS (The easy way)
  8. 8. Canonical “HelloWorld” Example
  9. 9. <!DOCTYPE html> <html> <head> <title>Canonical Example</title> </head> <body> <div data-ng-app> <input type="text" data-ng-model="message"> <h1>{{message + " World"}}</h1> </div> <script src="angular.min.js"></script> </body> </html>
  10. 10. Directives: Module (ngApp) Model (ngModel)
  11. 11. Data Binding: Model and $scope
  12. 12. Controllers Dependency Injection
  13. 13. <!DOCTYPE html> <html data-ng-app> <head> <title>Controller Example</title> </head> <body> <div data-ng-controller="studentController"> <ul> <li data-ng-repeat="student in students"> {{student.name}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul> </div> <script src="angular.min.js"></script> <script src="studentController.js"></script> </body> </html>
  14. 14. function studentController($scope) { $scope.students = [ { name: "John Doh", class: 6, grade: 93 }, { name: "Steve Smith", class: 5, grade: 72 }, { name: "Jane Doe", class: 7, grade: 87 }, . . . ]; }
  15. 15. Built-In Filters
  16. 16. <!DOCTYPE html> <html data-ng-app> <head> <title>Controller Example</title> </head> <body> <div data-ng-controller=”studentController"> <input type="text" data-ng-model="search.name"> <ul> <li data-ng-repeat="student in students | filter:search | orderBy:'grade':true"> {{student.name}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul> </div> <script src="angular.min.js"></script> <script src="studentController.js"></script> </body> </html>
  17. 17. Routing and Deep Linking
  18. 18. $routeProvider
  19. 19. var app = angular.module("app", ["ngRoute"]); app.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'partials/home.html', controller: 'HomeController’ }). when('/classrooms', { templateUrl: 'partials/classrooms.html', controller: 'ClassroomController’ }). when('/students/:classroom', { templateUrl: 'partials/studentsClassrooms.html', controller: 'StudentController’ }). when('/students', { templateUrl: 'partials/students.html', controller: 'StudentController’ }). otherwise({ redirectTo: '/’ }); }]);
  20. 20. View
  21. 21. <!DOCTYPE html> <html data-ng-app="app"> <head> <title>School Roster</title> </head> <body> <h1>School Roster</h1> <div data-ng-view /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script> <script src="app.js"></script> </body> </html>
  22. 22. home.html <a href="#/classrooms">List of Classrooms</a><p/> <a href="#/students">List of Students</a> classrooms.html <h2>Classrooms</h2> <h3 data-ng-repeat="classroom in classrooms | orderBy:'classroom'"> <a href="#/students/{{classroom}}">{{classroom}}</a> </h3> students.html <h2>Students</h2> Filter: <input type="text" data-ng-model="search.name"> <ul> <li data-ng-click="displayStudentInfo(student)" data-ng-repeat="student in students | filter:search | orderBy:'grade':true"> {{student.name}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul> studentsClassroom.html <h2>Students by Classroom - Room {{classroom}}</h2> <ul> <li data-ng-repeat="student in students | filter:classroom | orderBy:'name'"> {{student.name}} earned a grade of {{student.grade}}. </li> </ul>
  23. 23. app.controller("HomeController", function () {}); app.controller("ClassroomController", function ($scope) { $scope.classrooms = [513, 602, 722]; }); app.controller("StudentController", function ($scope, $routeParams) { $scope.students = [ { name: "John Doh", classroom: 602, grade: 93 }, { name: "Steve Smith", classroom: 513, grade: 72 }, . . . ]; $scope.displayStudentInfo = function(student) { alert(student.name); } if ($routeParams.classroom) $scope.classroom = $routeParams.classroom; });
  24. 24. Controller As
  25. 25. <!DOCTYPE html> <html data-ng-app> <head> <title>Controller Example</title> </head> <body> <div data-ng-controller="studentController as vm"> <ul> <li data-ng-repeat="student in vm.students"> {{student.name}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul> </div> <script src="angular.min.js"></script> <script src="studentControllerAs.js"></script> </body> </html>
  26. 26. function studentController() { var vm = this; vm.students = [ { name: "John Doh", class: 6, grade: 93 }, { name: "Steve Smith", class: 5, grade: 72 }, { name: "Jane Doe", class: 7, grade: 87 }, . . . ]; }
  27. 27. Built-In Services
  28. 28. Custom Services
  29. 29. app.factory("studentRepository", function () { var factoryInstance = {}; var students = [ { name: "John Doh", classroom: 602, grade: 93 }, { name: "Steve Smith", classroom: 513, grade: 72 }, . . . ]; factory.getStudents = function () { return students; } return factoryInstance; });
  30. 30. app.controller("StudentController", function ($scope, $routeParams, studentRepository) { $scope.students = studentRepository.getStudents(); $scope.displayStudentInfo = function(student) { alert(student.name); } if ($routeParams.classroom) $scope.classroom = $routeParams.classroom; });
  31. 31. Built-In Directives https://docs.angularjs.org/api/ng/directive http://angular-ui.github.io/ https://github.com/kendo-labs/angular-kendo
  32. 32. Custom Directives …pretending he knows something.
  33. 33. app.directive("colorize", function () { return { restrict: "AE”, scope: { color: "=" }, template: "<span>" + "<span style='color: {{color}};' data-ng-transclude></span>" + "</span>", transclude: true }; });
  34. 34. <h2>Students</h2> Filter: <input type="text" data-ng-model="search.name"><br/> Color: <input type="text" data-ng-model="chosenColor"><br/> <ul> <li colorize color="chosenColor" data-ng-click="displayStudentInfo(student)” data-ng-repeat="student in students | filter:search | orderBy:'grade':true"> {{student.name}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul>
  35. 35. app.directive("collapsible", function () { return { restrict: "E", template: "<div>" + "<h3 data-ng-click='toggleVisibility()'>{{title}}</h3>" + "<div data-ng-show='visible' data-ng-transclude></div>" + "</div>", scope: { title: "@” }, replace: true, link: function (scope, element, attrs, ctrls, transclude) { transclude(scope.$parent, function(clone, scope) { element.children().eq(1).empty(); element.children().append(clone); }); }, controller: function ($scope) { $scope.visible = true; $scope.toggleVisibility = function () { $scope.visible = !$scope.visible; if (!$scope.visible) $scope.$parent.search.name = ”” }; }, transclude: true }; });
  36. 36. <collapsible title="Toggle Filtering"> Filter: <input type="text" data-ng-model="search.name"> </collapsible>
  37. 37. E: <my-directive></my-directive> A: <div my-directive></div> C: <div class=“my-directive”></div> M: <!-- directive: my-directive -->
  38. 38. Custom Filters
  39. 39. app.filter("spacer", function() { return function(text) { text = text.split("").join(" "); return text; }; });
  40. 40. <ul> <li data-ng-click="displayStudentInfo(student)" data-ng-repeat="student in students | filter:search | orderBy:'grade':true"> {{student.name | spacer}} is in classroom {{student.classroom}}, and earned a grade of {{student.grade}}. </li> </ul>
  41. 41. Remote Data and $http
  42. 42. Promises
  43. 43. app.factory("studentRepository", function ($http) { var factory = {}; factory.getStudents = function () { return $http.get("http://localhost/students.json"); } return factory; });
  44. 44. app.controller("StudentController", function($scope, $routeParams, studentRepository) { studentRepository.getStudents().then(function (result) { $scope.students = result.data; }); $scope.displayStudentInfo = function(student) { alert(student.name); } if ($routeParams.classroom) $scope.classroom = $routeParams.classroom; });
  45. 45. Learning Resources  AngularJS: https://angularjs.org/  How do I think in AngularJS…: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i- have-a-jquery-background  Create an Angular App in Seconds with HotTowel: http://www.johnpapa.net/hot-towel-angular/  Angular App StructuringGuideline: http://www.johnpapa.net/angular-app-structuring-guidelines/  AngularJS - ng-conf 2014: http://ng-conf.ng-learn.org/  AngularJS on Google+: https://plus.google.com/+AngularJS/posts

×