SlideShare a Scribd company logo
1 of 45
Download to read offline
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-model="message">
<h1>{{message + " World"}}</h1>
</div>
<script src="angular.min.js"></script>
</body>
</html>
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="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>
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
},
.
.
.
];
}
Built-In Filters
<!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>
Routing and Deep Linking
$routeProvider
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: '/’
});
}]);
View
<!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>
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>
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;
});
Controller 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>
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
},
.
.
.
];
}
Built-In Services
Custom Services
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;
});
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;
});
Built-In Directives
https://docs.angularjs.org/api/ng/directive
http://angular-ui.github.io/
https://github.com/kendo-labs/angular-kendo
Custom Directives
…pretending he knows something.
app.directive("colorize", function () {
return {
restrict: "AE”,
scope: {
color: "="
},
template: "<span>" +
"<span style='color: {{color}};' data-ng-transclude></span>" +
"</span>",
transclude: true
};
});
<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>
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
};
});
<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-directive -->
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':true">
{{student.name | spacer}} is in classroom
{{student.classroom}}, and earned a grade of
{{student.grade}}.
</li>
</ul>
Remote Data and $http
Promises
app.factory("studentRepository", function ($http) {
var factory = {};
factory.getStudents = function () {
return $http.get("http://localhost/students.json");
}
return factory;
});
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;
});
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

More Related Content

What's hot

Single page webapps & javascript-testing
Single page webapps & javascript-testingSingle page webapps & javascript-testing
Single page webapps & javascript-testingsmontanari
 
Empower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo MixinsEmpower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo MixinsOdoo
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingDoug Neiner
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)Vladislav Ermolin
 
jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');mikehostetler
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4Heather Rock
 
Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentationScott Messinger
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSbuttyx
 
Odoo Experience 2018 - Develop an App with the Odoo Framework
Odoo Experience 2018 - Develop an App with the Odoo FrameworkOdoo Experience 2018 - Develop an App with the Odoo Framework
Odoo Experience 2018 - Develop an App with the Odoo FrameworkElínAnna Jónasdóttir
 
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverSpike Brehm
 
Client Side MVC & Angular
Client Side MVC & AngularClient Side MVC & Angular
Client Side MVC & AngularAlexe Bogdan
 

What's hot (20)

Single page webapps & javascript-testing
Single page webapps & javascript-testingSingle page webapps & javascript-testing
Single page webapps & javascript-testing
 
Empower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo MixinsEmpower your App by Inheriting from Odoo Mixins
Empower your App by Inheriting from Odoo Mixins
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Ext JS Introduction
Ext JS IntroductionExt JS Introduction
Ext JS Introduction
 
Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)Dialogs in Android MVVM (14.11.2019)
Dialogs in Android MVVM (14.11.2019)
 
jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
 
Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentation
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJS
 
Odoo Experience 2018 - Develop an App with the Odoo Framework
Odoo Experience 2018 - Develop an App with the Odoo FrameworkOdoo Experience 2018 - Develop an App with the Odoo Framework
Odoo Experience 2018 - Develop an App with the Odoo Framework
 
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
 
JavaScript Libraries
JavaScript LibrariesJavaScript Libraries
JavaScript Libraries
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and server
 
22 j query1
22 j query122 j query1
22 j query1
 
Client Side MVC & Angular
Client Side MVC & AngularClient Side MVC & Angular
Client Side MVC & Angular
 
FuncUnit
FuncUnitFuncUnit
FuncUnit
 

Viewers also liked

Iglesia Presbiteriana Getsemani
Iglesia Presbiteriana GetsemaniIglesia Presbiteriana Getsemani
Iglesia Presbiteriana Getsemanijpc6760
 
Copy crash course maribel gracia 6340.65 revised 1
Copy crash course maribel gracia 6340.65 revised 1Copy crash course maribel gracia 6340.65 revised 1
Copy crash course maribel gracia 6340.65 revised 1mgracia5
 
Casanova juanitap.~edtc6340.65copyrightrevision3
Casanova juanitap.~edtc6340.65copyrightrevision3Casanova juanitap.~edtc6340.65copyrightrevision3
Casanova juanitap.~edtc6340.65copyrightrevision3jpc6760
 
Copy crash course maribel gracia 6340.65 revised 3
Copy crash course maribel gracia 6340.65 revised 3Copy crash course maribel gracia 6340.65 revised 3
Copy crash course maribel gracia 6340.65 revised 3mgracia5
 
Sample Case Studies Without References
Sample Case Studies Without ReferencesSample Case Studies Without References
Sample Case Studies Without Referencesbohargrove
 
Copyright crash course
Copyright crash  courseCopyright crash  course
Copyright crash coursemgracia5
 
Copy crash course maribel gracia 6340.65 revised 5 [recovered]
Copy crash course maribel gracia 6340.65 revised 5 [recovered]Copy crash course maribel gracia 6340.65 revised 5 [recovered]
Copy crash course maribel gracia 6340.65 revised 5 [recovered]mgracia5
 
Copy crash course maribel gracia 6340.65 revised 2
Copy crash course maribel gracia 6340.65 revised 2Copy crash course maribel gracia 6340.65 revised 2
Copy crash course maribel gracia 6340.65 revised 2mgracia5
 
Copyright Crash Course 1st revised ppt 6340.64 Sonia Aldape
Copyright Crash Course 1st revised ppt 6340.64 Sonia AldapeCopyright Crash Course 1st revised ppt 6340.64 Sonia Aldape
Copyright Crash Course 1st revised ppt 6340.64 Sonia Aldapesoniaaldape
 

Viewers also liked (9)

Iglesia Presbiteriana Getsemani
Iglesia Presbiteriana GetsemaniIglesia Presbiteriana Getsemani
Iglesia Presbiteriana Getsemani
 
Copy crash course maribel gracia 6340.65 revised 1
Copy crash course maribel gracia 6340.65 revised 1Copy crash course maribel gracia 6340.65 revised 1
Copy crash course maribel gracia 6340.65 revised 1
 
Casanova juanitap.~edtc6340.65copyrightrevision3
Casanova juanitap.~edtc6340.65copyrightrevision3Casanova juanitap.~edtc6340.65copyrightrevision3
Casanova juanitap.~edtc6340.65copyrightrevision3
 
Copy crash course maribel gracia 6340.65 revised 3
Copy crash course maribel gracia 6340.65 revised 3Copy crash course maribel gracia 6340.65 revised 3
Copy crash course maribel gracia 6340.65 revised 3
 
Sample Case Studies Without References
Sample Case Studies Without ReferencesSample Case Studies Without References
Sample Case Studies Without References
 
Copyright crash course
Copyright crash  courseCopyright crash  course
Copyright crash course
 
Copy crash course maribel gracia 6340.65 revised 5 [recovered]
Copy crash course maribel gracia 6340.65 revised 5 [recovered]Copy crash course maribel gracia 6340.65 revised 5 [recovered]
Copy crash course maribel gracia 6340.65 revised 5 [recovered]
 
Copy crash course maribel gracia 6340.65 revised 2
Copy crash course maribel gracia 6340.65 revised 2Copy crash course maribel gracia 6340.65 revised 2
Copy crash course maribel gracia 6340.65 revised 2
 
Copyright Crash Course 1st revised ppt 6340.64 Sonia Aldape
Copyright Crash Course 1st revised ppt 6340.64 Sonia AldapeCopyright Crash Course 1st revised ppt 6340.64 Sonia Aldape
Copyright Crash Course 1st revised ppt 6340.64 Sonia Aldape
 

Similar to AngularJS On-Ramp

Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal coreMarcin Wosinek
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsReturn on Intelligence
 
AngularJS: What's the Big Deal?
AngularJS: What's the Big Deal?AngularJS: What's the Big Deal?
AngularJS: What's the Big Deal?Jim Duffy
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksHjörtur Hilmarsson
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Componentscagataycivici
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ EtsyNishan Subedi
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014Dariusz Kalbarczyk
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Marcin Wosinek
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksMario Heiderich
 

Similar to AngularJS On-Ramp (20)

Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal core
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
AngularJS and SPA
AngularJS and SPAAngularJS and SPA
AngularJS and SPA
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.js
 
AngularJS: What's the Big Deal?
AngularJS: What's the Big Deal?AngularJS: What's the Big Deal?
AngularJS: What's the Big Deal?
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Components
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
Valentine with AngularJS
Valentine with AngularJSValentine with AngularJS
Valentine with AngularJS
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
 

Recently uploaded

Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfCloudMetic
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...MyFAA
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfMind IT Systems
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.Ritesh Kanjee
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startMaxim Salnikov
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfICS
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 

Recently uploaded (20)

Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdf
 
Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to start
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdf
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 

AngularJS On-Ramp

  • 1. Dev Storyteller presents: Mark Freedman http://about.com/MarkFreedman
  • 2. Who Am I to Speak About AngularJS?
  • 3. Death by DOM Manipulation (jQuery)
  • 4. What is AngularJS? Miško Hevery & Adam Abrons - 2009 Google Feedback - 2010
  • 5. Why do I care?
  • 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>
  • 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. 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 }, . . . ]; }
  • 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. Routing and Deep Linking
  • 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. View
  • 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. 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. 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; });
  • 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. 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 }, . . . ]; }
  • 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. 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; });
  • 33. app.directive("colorize", function () { return { restrict: "AE”, scope: { color: "=" }, template: "<span>" + "<span style='color: {{color}};' data-ng-transclude></span>" + "</span>", transclude: true }; });
  • 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. 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. <collapsible title="Toggle Filtering"> Filter: <input type="text" data-ng-model="search.name"> </collapsible>
  • 37. E: <my-directive></my-directive> A: <div my-directive></div> C: <div class=“my-directive”></div> M: <!-- directive: my-directive -->
  • 39. app.filter("spacer", function() { return function(text) { text = text.split("").join(" "); return text; }; });
  • 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>
  • 43. app.factory("studentRepository", function ($http) { var factory = {}; factory.getStudents = function () { return $http.get("http://localhost/students.json"); } return factory; });
  • 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. 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

Editor's Notes

  1. 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 
  2. 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.
  3. 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.
  4. canonical.html
  5. 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.