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
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