Dev Storyteller presents:
Mark Freedman
http://about.com/MarkFreedman
Who Am I to Speak About
AngularJS?
Death by DOM Manipulation
(jQuery)
What is AngularJS?
Miško Hevery & Adam Abrons - 2009
Google Feedback - 2010
Why do I care?
MV Whatever
Getting AngularJS
(The easy way)
Canonical “HelloWorld”
Example
<!DOCTYPE html>
<html>
<head>
<title>Canonical Example</title>
</head>
<body>
<div data-ng-app>
<input type="text" data-ng...
Directives:
Module (ngApp)
Model (ngModel)
Data Binding:
Model and $scope
Controllers
Dependency Injection
<!DOCTYPE html>
<html data-ng-app>
<head>
<title>Controller Example</title>
</head>
<body>
<div data-ng-controller="studen...
function studentController($scope) {
$scope.students = [
{
name: "John Doh",
class: 6,
grade: 93
},
{
name: "Steve Smith",...
Built-In Filters
<!DOCTYPE html>
<html data-ng-app>
<head>
<title>Controller Example</title>
</head>
<body>
<div data-ng-controller=”studen...
Routing and Deep Linking
$routeProvider
var app = angular.module("app", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
wh...
View
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>School Roster</title>
</head>
<body>
<h1>School Roster</h1>
<div da...
home.html
<a href="#/classrooms">List of Classrooms</a><p/>
<a href="#/students">List of Students</a>
classrooms.html
<h2>...
app.controller("HomeController", function () {});
app.controller("ClassroomController", function ($scope) {
$scope.classro...
Controller As
<!DOCTYPE html>
<html data-ng-app>
<head>
<title>Controller Example</title>
</head>
<body>
<div data-ng-controller="studen...
function studentController() {
var vm = this;
vm.students = [
{
name: "John Doh",
class: 6,
grade: 93
},
{
name: "Steve Sm...
Built-In Services
Custom Services
app.factory("studentRepository", function () {
var factoryInstance = {};
var students = [
{
name: "John Doh",
classroom: 6...
app.controller("StudentController",
function ($scope, $routeParams, studentRepository) {
$scope.students = studentReposito...
Built-In Directives
https://docs.angularjs.org/api/ng/directive
http://angular-ui.github.io/
https://github.com/kendo-labs...
Custom Directives
…pretending he knows something.
app.directive("colorize", function () {
return {
restrict: "AE”,
scope: {
color: "="
},
template: "<span>" +
"<span style=...
<h2>Students</h2>
Filter: <input type="text" data-ng-model="search.name"><br/>
Color: <input type="text" data-ng-model="ch...
app.directive("collapsible", function () {
return {
restrict: "E",
template: "<div>" +
"<h3 data-ng-click='toggleVisibilit...
<collapsible title="Toggle Filtering">
Filter: <input type="text" data-ng-model="search.name">
</collapsible>
E: <my-directive></my-directive>
A: <div my-directive></div>
C: <div class=“my-directive”></div>
M: <!-- directive: my-dir...
Custom Filters
app.filter("spacer", function() {
return function(text) {
text = text.split("").join(" ");
return text;
};
});
<ul>
<li data-ng-click="displayStudentInfo(student)"
data-ng-repeat="student in students |
filter:search | orderBy:'grade'...
Remote Data and $http
Promises
app.factory("studentRepository", function ($http) {
var factory = {};
factory.getStudents = function () {
return $http.get...
app.controller("StudentController", function($scope, $routeParams, studentRepository)
{
studentRepository.getStudents().th...
Learning Resources
 AngularJS:
https://angularjs.org/
 How do I think in AngularJS…:
http://stackoverflow.com/questions/...
Upcoming SlideShare
Loading in …5
×

AngularJS On-Ramp

855 views
701 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
855
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • After the initial learning curve, your productivity will get a huge boost, especially when using some of the “seeding” options out there, such as John Papa’s HotTowel.

    The JavaScript in the apps I’ve written are maybe 20% the size of what they were when I was using jQuery to manipulate everything.

    Yes, you can finally, reliably unit test your JavaScript! AngularJS was build from the start to support testability, and includes mocking features to assist.

    Most importantly – they have cool release names 
  • Although many consider it an MVC framework due to the view, controller, and mode ($scope) parts of it, many consider it an MVVM framework due to its two-way binding. I think it provides the best of both worlds.
  • The easiest way is to install HotTowel, which comes with a seed app structure.

    But you can download and install manually, or use a CDN (content delivery network). Since I’m going to be showing the basics, I’ll keep this simple, so we don’t have to focus on the details of what a seeded environment such as HotTowel gives us.
  • canonical.html
  • ng-app wraps the part of HTML you want handled by AngularJS. In this example, we’re only wrapping a DIV, but normally, we’d wrap the entire page by placing it on the HTML element.

    In order to conform to HTML 5’s standards, and to not have Visual Studio complain, you can precede AngularJS’s built-in attributes with “data-” (data-ng-app).

    Data binding is done using the “handlebar” notation within your HTML.

    Simple two-way data binding is done using the ngModel directive in conjunction with the handlebar notation.

    If you dig into the AngularJS JavaScript (I mean, *really* dig), you’ll see that, among a lot of other logic, the ngModel directive includes logic to capture “model” updates on each keystroke.

  • 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

    ×