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.

AngularJS On-Ramp

1,315 views

Published on

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.

Published in: Software, Education, Technology
  • Be the first to comment

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

×