Angularjs

ANGULAR JS
Getting Started Guide

Agenda
•

Welcome To Angular

•

Traditional “Hello World” Example

•

Angular Concepts

•

Filters

•

Directives

•

Multiple Views and Routes

Meet Angular

•

Started on 2009 by google
engineers Miško Hevery
and Brad Green

•

Complete client-side
solution for SPA

Reasons To Use Angular
•

Technological and methodological solution to SPA

•

Best practices out-of-the-box

•

Active community effort

Reasons To Reconsider

•

Still no big apps written in angular

•

Adapting existing code takes work

A Traditional Hello World

•

Demo: A ﬁrst angular program

•

Code:  
http://jsbin.com/UkIhono/1/edit?html,js,output

What We Learned
•

An angular app has a root DOM node, marked by
ng-app
<html ng-app="MyApp">

What We Learned
•

We can use {{ … }} to inject JavaScript data into
our DOM

•

Values are searched in the active scope
<div ng-controller="Hello">
<h1>{{text}}</h1>
</div>

What We Learned
•

Controllers are JS objects

•

They are used to assign values to the active scope
<div ng-controller="Hello">
<h1>{{text}}</h1>
</div>

What We Learned
•

Some HTML elements got special attributes called
directives.

•

We met: ng-app, ng-controller

•

Directives tell angular how to process the page

What We Learned
•

We registered a controller factory using a special
angular function.

•

Angular later creates the controller instance
myApp.controller('Hello', ['$scope', function($scope) {
$scope.text = 'Welcome To Angular';
}]);

What We Learned

•

When registering a controller, we also tell angular
what services it needs

•

In our example, we asked for $scope

Angular MVC
Data (Model)

DOM (View)

'Welcome To
Angular'

<h1>Welcome To
Angular</h1>

Controller
JS Code

Lab
•

Implement an Angular app displaying:

•
•

3 Input box for quantities

•

1 push button titled “Calculate total”

•
•

3 product name

1 result input bux

Display quantity values stored in JS code

Angular Concepts
•

Client side templates

•

MVC architecture

•

Data binding

•

State and transitions

•

Object lifecycle

Client Side Templates
<h1>{{text}}</h1>

+
$scope.text = 'Welcome To Angular';

<h1>Welcome To Angular</h1>

Client Side Templates

•

No need to access server for rendering

•

Decouple view from JS code

Data Binding (before angular)
var newValue = 'bob is happy';
$('input').val(newValue);

<input />
$('input').on('input', function() {
self.value = $(this).val();
});

Data Binding (before angular)

•

JS code is coupled with HTML

•

Too much code

Data Binding (with angular)
$scope.tagline = 'Bob is happy today';

<input />
function get_tagline() {
return $scope.tagline;
}

Data Binding (with angular)

•

Decouple JS code from HTML

•

Less code

Bind Event Handlers
•

Angular assigns event handler from HTML using
directives

•

Example: Add functionality to calculate_total()
button from previous lab

Bind Event Handlers
•

But: There’s a bug …

•

Data is not updated back (from DOM to JS)

•

Let’s solve using angular

DOM -> JS

<input type="text" ng-model="hats.units" />

ng-model

•

Binds input value to a $scope property

•

When either changes, update the other one

Other Available Bindings

•

ng-bind: binds text contents of an element

•

ng-bind-html: binds innerHTML of an element

Demo

•

Let’s write a small angular app with 3 text areas

•

Text in all 3 textareas should always be the same

Lab
•

Fix previous lab so button will calculate the
correct items quantity

•

Add a price to every item, and display price as
well

Currency Problem
•

Normal numbers can have strange values

•

8613871$

•

2387.182617187351$

•

That’s hard to read as a currency

Currency Problem

•

What would you do ?

Currency Problem

•

We could try to write a to_currency() function

•

Use it every time we assign a value

Currency Problem
•

Or, we could just say …

<span class="price">{{ price | currency }}</span>

Angular Filters
•

A pipe in an expression tells angular to run it
through a ﬁlter before displaying

•

A ﬁlter is just a function taking input and returning
an output (can also take parameters)

Angular Filters
•

What you get:

•

Clear display code

•

General reusable functions

Built-In Filters
•

json

•

date

•

limitTo

•

orderBy

•

lowecase

•

uppercase

•

number

<span class=“price">
{{ price | currency }}
</span>
!
<span class=“name">
{{ firstname | uppercase }}
</span>
!
<span class=“date">
{{1288323623006 | date:’medium'}}
</span>

Custom Filters
1. app.filter('longest', function() {
2. return function(input) {
3.
4. if ( input.length == 0 ) return '';
5.
6. var result = input[0];
7. for ( var i=1; i < input.length; i++ ) {
8. if ( input[i].length > result.length ) result = input[i];
9. }
10. return result;
11. }
12.});

Directives
<button ng-click="count = count + 1"
ng-init="count=0">
Increment
</button>
!

count: {{count}}

Angular Directives

•

A directive “tells” angular compiler what to do
with the node

Using Directives

<a custom-button>Click me</a>


<custom-button>Click me</custom-button>


<a class="custom-button">Click me</a>

Let’s start with ng-repeat
•

Takes an array of values

•

Repeats an element for each item in the array

•

Useful for writing lists

Let’s start with ng-repeat
<ul>
<li ng-repeat="person in people”>
Name: {{person.name}}
</li>
</ul>

But there’s more
•

$index translates to the index of current iteration

•

$ﬁrst is true on the ﬁrst iteration

•

$last it true on the last iteration

•

$middle is true in the middle

•

$even and $odd are true on even and odd  
iterations respectably

Repeat + Filters = Win

I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." />

!

<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>

http://docs.angularjs.org/api/ng.directive:ngRepeat

Other Directives
•

Directive Categories:

•

Handling events

•

Flow control in DOM creation

•

Speciﬁc solutions

•

Custom directives

Event Handlers
ng-click

ng-copy

ng-mousedown

ng-change

ng-paste

ng-mouseup

ng-blur

ng-cut

ng-keypress

ng-focus

hg-submit

ng-mouseover

ng-dblclick

ng-mouseenter

Conditional DOM
•

ng-if

•

ng-switch

•

ng-hide

•

ng-show

•

ng-readonly

•

ng-repeat

<button ng-click="count = count + 1"
ng-init="count = 0">Clicks: {{count}}
</button>

<p ng-hide="count%3 == 0">{{ welcome_text }}</p>

Other Directives
•

ng-class

•

ng-cloak

•

ng-href

•

ng-src

•

ng-style

Lab
•

Modify our previous Shopping Cart page to allow
ﬂexible products

•

Controller should keep a list of products

•

Page should display products from the list

Routes and Views
Products
List Page

Shopping
Cart Page

viewport

Item Details
Page

Routes and Views
Products
List Page

viewport

Shopping
Cart Page

Item Details
Page

Angular Router renders a
template into the viewport

Routes and Views
/products
Products
List Page

viewport

/cart
Shopping
Cart Page

/item/72
Item Details
Page

Angular Router renders a
template into the viewport

Router Demo
myApp.config(['$routeProvider', '$locationProvider',
function($routes, $location) {
$routes.
when('/', {
templateUrl: '/app/src/views/list.html',
controller: 'ProductsList'
})
.when('/item/:id', {
templateUrl: '/app/src/views/details.html',
controller: 'ProductDetails'
})
.otherwise({
redirectTo: '/'
});

$location.html5Mode(true);
}]);

Router Notes

•

html5Mode controls whether to use #

•

Beware of relative paths

Router Events
•

When using a router, you get the following events
on the $rootScope

•

$routeChangeSuccess

•

$routeChangeError

Handling Route Events
•

Following code shows an alert after each page transition

•

Can use from any Controller
$scope.$on('$routeChangeSuccess', function() {
alert('wow');
});

Demo
•

Write a message list two pages application

•

Page 1: list all messages

•

Page 2: message details (on speciﬁc message)

•

Clicking a message leads to page 2

Lab

•

Add Breadcrumbs controller to the example

•

Should create a list of past visited pages (names +
links)

Client Server
Communication
Getting data from server

!

Using RESTful resources

The Basics

•

$httpProvider is a wrapper around XHR

•

It uses promises for its API magic

Given The User List Code
<div ng-controller="users"> 
<ul> 
<li ng-repeat="u in users"> 
<a>{{u.name}}</a> 
</li> 
</ul> 
</div>
app.controller('users', ['$scope', function($scope) { 
$scope.users = [ 
{ name: 'bob' }, 
{ name: 'john' }, 
{ name: 'brad' } 
]; 
}]);

Getting Data From Server

app.controller('users', ['$scope', '$http', function($scope, $http) { 
$http.get('/users.json') 
.success(function(data, status) { 
$scope.users = data; 
}); 
}]);

$http API
•

$http(config)

•

$http.get(url, config)

•

$http.post(url, data, config)

•

$http.put(url, data, config)

•

$http.delete(url, config)

$http conﬁg
$http({ 
method: 'GET', 
url: '/users.json', 
params: { sort: 'asc' }, 
headers: { 'my-header' : 'header-value' }, 
cache: true, 
timeout: 3000 // milliseconds 
});

Other Chaining Operations

•

.success(function(data, status, headers, conﬁg) { } )

•

.error(function(data, status, headers, conﬁg) { } )

$http

•

Low level wrapper around XHR

•

Simple to use and understand

Demo
•

Let’s use $http to communicate with REST API

•

Display a list of colours

•

Clicking a colour -> Delete

•

Provide a form to add a new colour

Meet ngResource
$save

POST /colors

$delete

DELETE /colors/7

$query

GET /colors

$get

GET /colors/7

Color

Using ngResource

var app = angular.module('MyApp', ['ngResource']);

Using ngResource

 
 

app.controller('users', ['$scope', '$resource', function($scope, $resource) { 
 

var Color = $resource('/colors/:id'); 
 

$scope.colors = Color.query(); 
 

}]);

Using ngResource

 

app.controller('users', ['$scope', '$resource', function($scope, $resource) { 
 

$scope.remove = function(id) {
$scope.colors[id].$remove({id: id}, function() { 
$scope.colors.splice(id, 1); 
}); 
 

}; 
 

}]);

ngResource

•

High level API for communicating with REST APIs

•

Cleaner and less callbacks

Angular + jQM
!

Introducing angular-jqm

!

Concepts

!

Demos

!

Meet angular-jqm
•

Native angular directives for JQM

•

Github: 
https://github.com/angular-widgets/angular-jqm

•

Docs: 
http://angular-widgets.github.io/angular-jqm/master/
docs/#/api

Concepts
•

jQM turns normal HTML to mobile-friendly
markup

•

angular-jqm is a full reimplementation of the
transformation (without jQuery or jQM
dependencies)

•

Uses same CSS

Concepts
<div data-role="header"> 
<h1>Page Title</h1> 
</div>

<div jqm-header> 
<h1>Welcome To ng-jqm</h1> 
</div>

<div role="banner" class="ui-header ui-bar-a" data-role="header"> 
<h1 aria-level="1" role="heading" class="ui-title">Page Title</h1> 
</div>

Advantages

•

Uses angular style

•

No “dirty” hacks

Disadvantages

•

Need to reimplement entire transformation code

•

(Still) Not feature-complete

angular-jqm boilerplate
<!DOCTYPE html> 
<html > 
<head> 
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> 
 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
<script src="angular.js"></script> 
<script src="angular-mobile.js"></script> 
<script src="angular-jqm.js"></script> 
 
<script src="app.js"></script> 
</head> 
 

<body ng-app="app"> 
 
 

<div jqm-caching-view></div> 
</body> 
 
 
</html>

angular-jqm boilerplate
var mod = angular.module('app', ['jqm']); 
mod.config(function($routeProvider) { 
// A route for a single page 
$routeProvider.when("/", { 
redirectTo: "main.html" 
}); 
// A route for all pages in one folder 
$routeProvider.when("/:page", { 
animation: 'page-slide', 
templateUrl: function(params) { 
return params.page; 
} 
}); 
});

Lab

•

Write an angular-jqm app to show a list of items
and quantities

•

Clicking a list item increases its quantity

Thanks For Listening
•

Ynon Perek

•

ynon@ynonperek.com

•

http://ynonperek.com

Photos From

•

http://placeit.net

•

http://123rf.com

Angularjs

More Related Content

What's hot (20)

Similar to Angularjs (20)

More from Ynon Perek (20)

Recently uploaded (20)

Angularjs