Download - AngularJS in 60ish Minutes - Dan Wahlin | FalafelCON 2014

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


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


<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


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

Agenda


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


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