AngularJS On-Ramp
-
Upload
mark-freedman -
Category
Software
-
view
389 -
download
0
description
Transcript of AngularJS On-Ramp
![Page 1: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/1.jpg)
AngularJS On-RampDev Storyteller presents:
Mark Freedman
http://about.com/MarkFreedman
![Page 2: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/2.jpg)
AngularJS On-Ramp
Who Am I to Speak About AngularJS?
![Page 3: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/3.jpg)
AngularJS On-Ramp
Death by DOM Manipulation
(jQuery)
![Page 4: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/4.jpg)
AngularJS On-Ramp
What is AngularJS?
Miško Hevery & Adam Abrons - 2009
Google Feedback - 2010
![Page 5: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/5.jpg)
AngularJS On-Ramp
Why do I care?
![Page 6: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/6.jpg)
AngularJS On-Ramp
MV Whatever
![Page 7: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/7.jpg)
AngularJS On-Ramp
Getting AngularJS(The easy way)
![Page 8: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/8.jpg)
AngularJS On-Ramp
Canonical “Hello World” Example
![Page 9: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/9.jpg)
AngularJS On-RampCanonical Example
<!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>
![Page 10: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/10.jpg)
AngularJS On-Ramp
Directives:
Module (ngApp)Model (ngModel)
![Page 11: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/11.jpg)
AngularJS On-Ramp
Data Binding:Model and $scope
ViewModel
($scope)Controller
![Page 12: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/12.jpg)
AngularJS On-Ramp
Controllers
Dependency Injection
![Page 13: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/13.jpg)
AngularJS On-RampSimple Controller
<!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>
![Page 14: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/14.jpg)
AngularJS On-RampSimple Controller
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 }, . . . ];}
![Page 15: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/15.jpg)
AngularJS On-Ramp
Built-In Filters
![Page 16: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/16.jpg)
AngularJS On-RampBuilt-In Filter
<!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>
![Page 17: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/17.jpg)
AngularJS On-Ramp
Routing and Deep Linking
![Page 18: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/18.jpg)
AngularJS On-Ramp
$routeProvider
![Page 19: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/19.jpg)
AngularJS On-RampConfiguring Routing
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: '/’ });}]);
![Page 20: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/20.jpg)
AngularJS On-Ramp
View
![Page 21: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/21.jpg)
AngularJS On-RampMain Page (with ngView)<!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>
![Page 22: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/22.jpg)
AngularJS On-RampPartials (Views)
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>
![Page 23: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/23.jpg)
AngularJS On-RampControllersapp.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;});
![Page 24: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/24.jpg)
AngularJS On-Ramp
Controller As
![Page 25: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/25.jpg)
AngularJS On-RampController As
<!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>
![Page 26: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/26.jpg)
AngularJS On-RampController As
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 }, . . . ];}
![Page 27: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/27.jpg)
AngularJS On-Ramp
Built-In Services
![Page 28: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/28.jpg)
AngularJS On-Ramp
Custom Services
![Page 29: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/29.jpg)
AngularJS On-RampcustomerRepository Service
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;});
![Page 30: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/30.jpg)
AngularJS On-RampModified Controller
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;});
![Page 31: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/31.jpg)
AngularJS On-Ramp
Built-In Directives
https://docs.angularjs.org/api/ng/directive
http://angular-ui.github.io/
https://github.com/kendo-labs/angular-kendo
![Page 32: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/32.jpg)
AngularJS On-Ramp
Custom Directives
…pretending he knows something.
![Page 33: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/33.jpg)
AngularJS On-RampDirective Declaration
app.directive("colorize", function () { return { restrict: "AE”, scope: { color: "=" }, template: "<span>" + "<span style='color: {{color}};' data-ng-transclude></span>" + "</span>", transclude: true };});
![Page 34: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/34.jpg)
AngularJS On-RampDirective Usage
<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>
![Page 35: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/35.jpg)
AngularJS On-RampAdvanced Directive Declaration
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 };});
![Page 36: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/36.jpg)
AngularJS On-RampAdvanced Directive Usage
<collapsible title="Toggle Filtering"> Filter: <input type="text" data-ng-model="search.name"></collapsible>
![Page 37: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/37.jpg)
AngularJS On-RampCustom Directives
E: <my-directive></my-directive>A: <div my-directive></div>C: <div class=“my-directive”></div>M: <!-- directive: my-directive -->
![Page 38: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/38.jpg)
AngularJS On-Ramp
Custom Filters
![Page 39: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/39.jpg)
AngularJS On-RampCustom “spacer” Filter
app.filter("spacer", function() { return function(text) { text = text.split("").join(" "); return text; };});
![Page 40: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/40.jpg)
AngularJS On-RampUsing the “spacer” Filter
<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>
![Page 41: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/41.jpg)
AngularJS On-Ramp
Remote Data and $http
![Page 42: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/42.jpg)
AngularJS On-Ramp
Promises
![Page 43: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/43.jpg)
AngularJS On-RampUsing $http
app.factory("studentRepository", function ($http) { var factory = {};
factory.getStudents = function () { return $http.get("http://localhost/students.json"); }
return factory;});
![Page 44: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/44.jpg)
AngularJS On-RampHandling the Promise
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;});
![Page 45: AngularJS On-Ramp](https://reader036.fdocuments.in/reader036/viewer/2022062312/554f6d58b4c905c8088b5339/html5/thumbnails/45.jpg)
AngularJS On-Ramp
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 Hot Towel:http://www.johnpapa.net/hot-towel-angular/
Angular App Structuring Guideline: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