angularjs in 60ish minutes - dan wahlin | falafelcon 2014
DESCRIPTION
Single Page Applications (SPAs) are all the rage now days but if you've built a true SPA you know that they can be fairly involved to create. There are typically a lot of moving parts and scripts ranging from history, to navigation, to data access. Have you thought through maintenance of the application down the road and how simple or complex it will be to make modifications as scripts change? In this session Dan Wahlin will introduce a solid introduction to the AngularJS SPA framework and demonstrate many of the built-in SPA features it provides. If you like to work with views, controllers, modules, plus tie into existing framework features without having to focus on all of the scripts under the cover then this is definitely a framework to check out!TRANSCRIPT
![Page 1: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/1.jpg)
AngularJS in 60ish Minutes
Dan Wahlin
![Page 2: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/2.jpg)
Dan Wahlin
Blog h8p://weblogs.asp.net/dwahlin Twi8er
@DanWahlin
![Page 3: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/3.jpg)
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
![Page 4: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/4.jpg)
Single Page ApplicaDons SPAs allow different views to be loaded into a shell page
SPA Demo http://www.myspa.com
<div> </div> View1
![Page 5: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/5.jpg)
SPA Demo http://www.myspa.com
Single Page ApplicaDon Views Views can be replaced with other views
<div> </div> View1 View2
![Page 6: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/6.jpg)
Single Page ApplicaDon History SPAs maintain a history of views that have been displayed
SPA Demo http://www.myspa.com
<div> </div> View1 View2
![Page 7: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/7.jpg)
The Challenge with SPAs • SPAs rely on many different technologies:
• DOM manipula7on • History • Rou7ng • Ajax • Data Binding • More…
![Page 8: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/8.jpg)
Agenda
• AngularJS Features • Ge#ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
![Page 9: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/9.jpg)
ngularJS is a full-featured SPA framework
Data Binding MVC Routing
Templates
ViewModel Views
Services Dependency Injection
Directives
Testing
Controllers
jqLite
Validation
Factories History
![Page 10: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/10.jpg)
View Controller
Factory Directives
Routes
Module
$scope
Service Filters
Key Players in AngularJS
UI Logic/Data
![Page 11: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/11.jpg)
View Controller $scope
$scope is the "glue" (ViewModel) between a controller and a view
What is Scope?
![Page 12: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/12.jpg)
The Big Picture
View Controller
Routes
Module
Config
$scope
*Factory Directives
![Page 13: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/13.jpg)
Agenda
• AngularJS Features • Ge4ng Started • Direc/ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
![Page 14: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/14.jpg)
<!DOCTYPE html>
<html ng-‐app>
<head>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-‐model="name" /> {{ name }}
</div>
<script src="js/angular.js"></script>
</body>
</html>
Directive
Directive
Data Binding Expression
Using Directives
![Page 15: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/15.jpg)
<ul> <li data-‐ng-‐repeat="cust in customers | orderBy:'name'"> {{ cust.name | uppercase }} </li> </ul>
Order customers by name property
<input type="text" data-‐ng-‐model="nameText" /> <ul> <li data-‐ng-‐repeat="cust in customers | filter:nameText | orderBy:'name'"> {{ cust.name }} {{ cust.city }}</li> </ul>
Filter customers by model value
Using Filters
![Page 16: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/16.jpg)
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
![Page 17: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/17.jpg)
Factory Directive
Routes
Module
Config
Service
Provider
<html ng-‐app="moduleName">
Modules are Containers
Value
Filter Controller
![Page 18: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/18.jpg)
var demoApp = angular.module('demoApp', []); var demoApp = angular.module('demoApp', ['helperModule']);
What's the Array for?
Module that demoApp depends on
Creating a Module
![Page 19: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/19.jpg)
var demoApp = angular.module('demoApp', []); demoApp.controller('SimpleController', function ($scope) { $scope.customers = [ { name: 'Dave Jones', city: 'Phoenix' }, { name: 'Jamie Riley', city: 'Atlanta' }, { name: 'Heedy Wahlin', city: 'Chandler' }, { name: 'Thomas Winter', city: 'Seattle' } ]; });
Define a Module
Define a Controller
Creating a Controller in a Module
![Page 20: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/20.jpg)
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
![Page 21: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/21.jpg)
The Role of Routes SPA Demo
http://www.myspa.com
View1 View2
View4 View3
/view2
/view3
/view4
/view1
![Page 22: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/22.jpg)
Defining Routes var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'CustomersController', templateUrl:'customers.html' }) .when('/orders', { controller: 'OrdersController', templateUrl:'orders.html' }) .otherwise({ redirectTo: '/' }); });
Define Module Routes
![Page 23: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/23.jpg)
SPA Demo http://www.myspa.com
Where do Views Go in a Page? Dynamically loaded views are injected into the shell page as a module loads:
<div ng-‐view></div>
<ng-‐view></ng-‐view>
OR View1
![Page 24: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/24.jpg)
The Role of Factories var demoApp = angular.module('demoApp', [])
.factory('simpleFactory', function ($http) {
var factory = {};
factory.getCustomers = function () {
return $http.get(…);
};
return factory;
})
.controller('SimpleController', function ($scope, simpleFactory) {
= simpleFactory.getCustomers().success(…);
});
Factory Injected
![Page 25: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/25.jpg)
The Big Picture
View Controller
Routes
Module
Config
$scope
*Factory Directives
![Page 26: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/26.jpg)
hNps://github.com/DanWahlin/CustomerManagerStandard
![Page 27: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/27.jpg)
Find more ngularJS content at:
Blog h8p://weblogs.asp.net/dwahlin Twi8er
@DanWahlin
![Page 28: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/28.jpg)
More details at:
hNp://7nyurl.com/AngularJSJumpStart
![Page 29: AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014](https://reader033.vdocument.in/reader033/viewer/2022060121/5593ec401a28abc61e8b4615/html5/thumbnails/29.jpg)