Post on 01-Jul-2015
description
AngularJS in 60ish Minutes
Dan Wahlin
Dan Wahlin
Blog h8p://weblogs.asp.net/dwahlin Twi8er
@DanWahlin
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
Single Page ApplicaDons SPAs allow different views to be loaded into a shell page
SPA Demo http://www.myspa.com
<div> </div> View1
SPA Demo http://www.myspa.com
Single Page ApplicaDon Views Views can be replaced with other views
<div> </div> View1 View2
Single Page ApplicaDon History SPAs maintain a history of views that have been displayed
SPA Demo http://www.myspa.com
<div> </div> View1 View2
The Challenge with SPAs • SPAs rely on many different technologies:
• DOM manipula7on • History • Rou7ng • Ajax • Data Binding • More…
Agenda
• AngularJS Features • Ge#ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
ngularJS is a full-featured SPA framework
Data Binding MVC Routing
Templates
ViewModel Views
Services Dependency Injection
Directives
Testing
Controllers
jqLite
Validation
Factories History
View Controller
Factory Directives
Routes
Module
$scope
Service Filters
Key Players in AngularJS
UI Logic/Data
View Controller $scope
$scope is the "glue" (ViewModel) between a controller and a view
What is Scope?
The Big Picture
View Controller
Routes
Module
Config
$scope
*Factory Directives
Agenda
• AngularJS Features • Ge4ng Started • Direc/ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
<!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
<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
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
Factory Directive
Routes
Module
Config
Service
Provider
<html ng-‐app="moduleName">
Modules are Containers
Value
Filter Controller
var demoApp = angular.module('demoApp', []); var demoApp = angular.module('demoApp', ['helperModule']);
What's the Array for?
Module that demoApp depends on
Creating a Module
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
Agenda
• AngularJS Features • Ge4ng Started • Direc7ves, Filters and Data Binding • Modules and Controllers • Routes and Factories
The Role of Routes SPA Demo
http://www.myspa.com
View1 View2
View4 View3
/view2
/view3
/view4
/view1
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
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
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
The Big Picture
View Controller
Routes
Module
Config
$scope
*Factory Directives
hNps://github.com/DanWahlin/CustomerManagerStandard
Find more ngularJS content at:
Blog h8p://weblogs.asp.net/dwahlin Twi8er
@DanWahlin
More details at:
hNp://7nyurl.com/AngularJSJumpStart