Angularjs

Shaping Up with Angular
Level 1: Getting Started

What you need to know
Must know Not so important
Nice to know
Automated Testing
BDD - Behavior Driven Development
TDD - Test Driven Development
etc
HTML & CSS
JavaScript
jQuery
Ruby on Rails
Python, PHP, etc
Databases
Why Angular?
If youre using JavaScript to create a dynamic website,
Angular is a good choice.
Angular helps you organize your JavaScript
Angular helps create responsive (as in fast) websites.
Angular plays well with jQuery
Angular is easy to test

Traditional Page-Refresh
Screencast: Request-Response Application
NOTE: Time between user
interaction and response.
Web Server
HTML JavaScript
Response with Webpage & Assets
Web Browser
URL Request to server
User clicks on link, new Request
HTML JavaScript
Browser loads up
entire webpage.
Browser loads up
entire webpage.
Screencast: Request-Response Application
NOTE: Note how responsive the page is
A responsive website using Angular
Web Server
Web Browser
Response with JSON Data
User clicks on link, new Request
HTML JavaScript
DATA
Browser loads up
entire webpage.
Data is loaded into
existing page.
Modern API-Driven Application
HTML
Browser
App
Data
Source
Mobile
App
Developers
Server
API
A client-side JavaScript Framework for adding interactivity to HTML.
app.js index.html
How do we tell our HTML when to trigger our JavaScript?
<!DOCTYPE html>
<html>
<body
. . .
</body>
</html>
function Store
alert('Welcome, Gregg!');
}
(){
>
What is Angular JS?
<!DOCTYPE html>
<html>
<body
. . .
</body>
</html>
app.js
function Store
alert('Welcome, Gregg!');
}
A Directive is a marker on a HTML tag that tells Angular to run or reference
some JavaScript code.
Directives
Name of
function to call
index.html
Controller(){
ng-controller="StoreController">
The Flatlanders Store!
Screencast: Flatlanders Store
Fully Functional
Download AngularJS http://angularjs.org/
Well need angular.min.js
Downloading the libraries
Download Twitter Bootstrap http://getbootstrap.com/
Well need bootstrap.min.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
Getting Started
index.html
Twitter Bootstrap
AngularJS
Modules
Where we write pieces of our Angular application.
Makes our code more maintainable, testable, and readable.
Where we define dependencies for our app.

Modules can use other Modules...
Creating Our First Module
Dependencies
Other libraries we might need.
We have none... for now
Application
Name
AngularJS
var app = angular.module('store', [ ]);
Including Our Module
app.js
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
<!DOCTYPE html>
<html ng-app="store">
<head>
</head>
<body>
</body>
</html>
Run this module when
the document loads.
index.html
Allow you to insert dynamic values into your HTML.
Expressions
Numerical Operations
evaluates to
String Operations
evaluates to
+ More Operations:
http://docs.angularjs.org/guide/expression
<p>
I am {{4 + 6}}
</p>
<p>
{{"hello" + " you"}}
</p>
<p>
I am 10
</p>
<p>
hello you
</p>
app.js
<!DOCTYPE html>
<head>
</head>
<body>
<p>{{"hello" + " you"}}</p>
</body>
</html>
index.html
Challenges
Working With Data
...just a simple
object we want to
print to the page.
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
Controllers
app.js
Notice that controller is attached to (inside) our app.
Controllers are where we define our apps behavior by defining
functions and values.
Wrapping your Javascript
in a closure is a good habit!
var gem = {
price: 2.95,
}.
})();
(function(){
app.controller('StoreController', function(){

});
Storing Data Inside the Controller
app.js
Now how do we
print out this
data inside our
webpage?
this.product = gem;
var gem = {
price: 2.95,
}.
})();
(function(){

});
<!DOCTYPE html>
<head>
</head>

</html>
<body>
<div>
<h1> Product Name </h1>
<h2> $Product Price </h2>
<p> Product Description </p>
</div>
</body>
Our Current HTML
Lets load our data into
this part of the page.
}
index.html
<body>
<div>
</div>
</body>
(function(){

this.product = gem;
});
. . .
})();
app.js
index.html
Attaching the Controller
<body>
<div ng-controller="StoreController as store">
</div>
</body>
Attaching the Controller
(function(){

this.product = gem;
});
. . .
})();
app.js
index.html
Controller name Alias Directive
<body>

</div>
</body>
index.html
Displaying Our First Product
(function(){

this.product = gem;
});
. . .
})();
app.js
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
Understanding Scope
Would never print a value!
The scope of
the Controller
is only inside
here...
}
{{store.product.name}}
<body>

</div>

</body>
Challenges
</div>
</body>
<body ng-controller="StoreController as store">
<div>
Adding A Button
index.html
var gem = {
price: 2.95,
}.
var gem = {
price: 2.95,
}.
canPurchase: false
</div>
</body>
Adding A Button
index.html
<button
How can we
only show this
button...
...when this is true?
D
ir
e
c
t
iv
e
s

t
o

t
h
e

r
e
s
c
u
e
!
<div>
> Add to Cart </button>
var gem = {
price: 2.95,
}.
canPurchase: false
</div>
</body>
NgShow Directive
index.html
<button
<div>
ng-show="store.product.canPurchase"> Add to Cart </button>
Will only show the element if the
value of the Expression is true.
</div>
</body>
index.html
<button
<div
NgHide Directive
If the product is sold out
we want to hide it.
var gem = {
price: 2.95,
}.
canPurchase: true,
soldOut: true
>
</div>
</body>
index.html
<button
<div
NgHide Directive
we want to hide it.
This is awkward and
a good example to
use ng-hide!
var gem = {
price: 2.95,
}.
canPurchase: true,
soldOut: true,
ng-show="!store.product.soldOut">
</div>
</body>
index.html
<button
<div
NgHide Directive
we want to hide it.
Much better!
var gem = {
price: 2.95,
}.
canPurchase: true,
soldOut: true,
ng-hide="store.product.soldOut">
Multiple Products
app.js
var gem =
name: "Dodecahedron",
price: 2.95,
description: ". . .",
canPurchase: true,
},
{
this.product = gem
});
;
Multiple Products
app.js
var gems = [

name: "Dodecahedron",
price: 2.95,
canPurchase: true,
},
{
name: "Pentagonal Gem",
price: 5.95,
canPurchase: false,
}
];
{
Now we have an array...
How might we display all these
products in our template?
M
a
y
b
e

a

D
ir
e
c
t
iv
e
?
this.products = gems
});
;
So we have multiple products...
Working with An Array
index.html
<div>
<h1> {{store.products[0].name}} </h1>
<h2> ${{store.products[0].price}} </h2>
<p> {{store.products[0].description}} </p>
<button ng-show="store.products[0].canPurchase">
Add to Cart</button>
</div>
. . .
</body>
index.html
. . .
</body>
Displaying the first product
is easy enough...
<div>
<button ng-show="
</div>
store.products[0].canPurchase">
index.html
<div
<button ng-show="
</div>
. . .
</body>
<div>
<button ng-show="store.products[1].canPurchase">
</div>
Why repeat yourself?
Why repeat yourself?
Why... You get it.
>
store.products[0].canPurchase">
That works...
index.html
<div
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="
</div>
. . .
</body>
ng-repeat="product in store.products"
products
>
Repeat this
section for
each product.
}
.canPurchase">
What We Have Learned So Far
Directives HTML annotations that trigger Javascript behaviors
Modules Where our application components live
Controllers Where we add application behavior
Expressions How values get displayed within the page
Challenges
Shaping Up with Angular.JS
Level 2: Filters, Directives, and Cleaner Code
ng-app attach the Application Module to the page
Directives We Know & Love
ng-controller attach a Controller function to the page
ng-show / ng-hide display a section based on an Expression
ng-repeat repeat a section for each item in an Array
<h1 ng-show="name"> Hello, {{name}}! </h1>
<li ng-repeat="product in store.products"> {{product.name}} </li>
Our Current Code
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
index.html
<em class="pull-right">${{product.price </em> }}
</h3>
</li>
</ul>
</body>
Theres a better way
to print out prices.
$2
Our First Filter
Pipe - send the output into
Format this into currency
Notice it gives the dollar sign (localized)
Specifies number of decimals
index.html
<em class="pull-right">{{product.price | currency </em> }}
<h3>
{{product.name}}
</h3>
</li>
</ul>
</body>
$2.00
{{ data | filter:options }}
Formatting with Filters
*Our Recipe
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
date
12/27/2013 @ 12:50AM
{{'octagon gem' | uppercase}}
uppercase & lowercase
Octagon Gem
{{'My Description' | limitTo:8}}
limitTo
My Descr
<li ng-repeat="product in store.products | orderBy:'-price'">
orderBy
Will list products by descending price.
Without the - products would list in ascending order.
<li ng-repeat="product in store.products | limitTo:3">
* *
var gems = [
{ name: 'Dodecahedron Gem',
price: 2.95,
images: [
{
full: 'dodecahedron-01-full.jpg',
thumb: 'dodecahedron-01-thumb.jpg'
},
{
full: "dodecahedron-02-full.jpg",
. . .
Adding an Image Array to our Product Array
Our New Array
Image Object
To display the first image in a product:
{{product.images[0].full}}
app.js
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img ng-src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
</body>
index.html
Using ng-src for Images
NG-SOURCE
to the rescue!
the browser tries to load the image
before the Expression evaluates.
Using Angular Expressions inside a src attribute causes an error!
<img src="{{product.images[0].full}}"/>
Our Products with Images
Challenges
More With Directives
How can I make my application
more interactive?
A Simple Set of Tabs
index.html
<section>
<ul class="nav nav-pills>
<li> <a href
<li> <a href
<li> <a href
>Description</a> </li>
>Specifications</a> </li>
>Reviews</a> </li>
</ul>
</section>
Introducing a new Directive!
index.html
Assigning a value to tab.
For now just print this value to the screen.
<section>
<li> <a href
<li> <a href
<li> <a href
>Description</a> </li>
>Specifications</a> </li>
>Reviews</a> </li>
{{tab}}
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
</ul>
</section>
Introducing a new Directive!
When ng-click changes the value of tab
the {{tab}} expression automatically gets updated!

Expressions define a 2-way Data Binding ...
this means Expressions are re-evaluated when a property changes.
Whoa, its dynamic and stuff...
<div class="panel"
<div class="panel"
Lets add the tab content panels
How do we make the tabs trigger the panel to show?
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel"
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<h4>Reviews</h4>
</div>
>
>
>
tabs are up here...
. . .
Lets add the tab content panels
Now when a tab is selected it will show the appropriate panel!
<div class="panel" >
>
>
<h4>Description</h4>
</div>
<h4>Specifications</h4>
</div>
<h4>Reviews</h4>
</div>
ng-show="tab === 1"
ng-show="tab === 2"
ng-show="tab === 3"
<div class="panel"
<div class="panel"
show the panel
if tab is the
right number
But how do we set an
initial value for a tab?
Setting the Initial Value
index.html
ng-init allows us to evaluate an expression in the current scope.
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li> <a href ng-click="tab = 1">Description</a> </li>
<li> <a href ng-click="tab = 2">Specifications</a> </li>
<li> <a href ng-click="tab = 3">Reviews</a> </li>
</ul>
. . .
Now with the Initial Tab
Setting the Active Class
We need to set the class to active if current tab is selected ...
index.html
</ul>
ng-init="tab = 1">
>Description</a>
>Specifications</a>
>Reviews</a>
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
<section
<li
<li
<li
>
>
>
<a href
<a href
<a href
</li>
</li>
</li>
The ng-class directive
Name of the class to set.
Expression to evaluate
If true, set class to active,
otherwise nothing.
index.html
ng-init="tab = 1"> <section
<li
<li
<li
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
>Description</a>
>Specifications</a>
>Reviews</a>
</li>
</li>
</li>
</ul>
. . .
>
>
>
ng-class="{ active:tab === 1 }"
<a href
<a href
<a href
Feels dirty, doesnt it?
All our applications logic is inside our HTML.
How might we pull this
logic into a Controller?
index.html
<section
<li >
<a href >Description</a>
<li
</li>
>
<a href >Specifications</a>
<li
</li>
>
<a href >Reviews</a>
</li>
</ul>
ng-click=" " tab = 1
" tab = 2 ng-click="
ng-class="{ active: }"> tab === 1
<div class="panel" ng-show="
<h4>Description </h4>
</div>
tab === 1">

ng-init="tab = 1">
Creating our Panel Controller
index.html
app.js
ng-init="tab = 1" <section
<li >
<li
</li>
>
<li
</li>
>
</li>
</ul>
ng-controller="PanelController as panel"
app.controller("PanelController", function(){
});
" tab = 2 ng-click="
<li ng-class="{ active: }"> tab === 1
</div>
tab === 1">

>
Moving our tab initializer
index.html
app.js
<section
<li >
<li
</li>
>
<li
</li>
>
</li>
</ul>
});
this.tab = 1;
<a href ng-click=" " tab = 1
<a href ng-click=" " tab = 2
<a href
</div>
tab === 1">

ng-controller="PanelController as panel">
Creating our selectTab function
index.html
app.js
<section
<li >
<a href ng-click="panel.selectTab(1) >Description</a> "
<li
</li>
>
<a href >Specifications</a> ng-click="panel.selectTab(2)"
</li>
<li >
<a href ng-click="panel.selectTab(3) >Reviews</a>
</li>
</ul>
"
});
this.tab = 1;
ng-class="{ active:
ng-class="{ active:
ng-class="{ active:
}">
}">
}">
tab === 1
tab === 2
tab === 3
</div>
tab === 1">

this.tab = setTab;
};
function(setTab) { this.selectTab =
Creating our isSelected function
index.html
app.js
<section
<li ng-class="{ active:
ng-class="{ active:
ng-class="{ active:
panel.isSelected(1)
panel.isSelected(2)
panel.isSelected(3)
}">
}">
}">
<a href ng-click="panel.selectTab(1) >Description</a> "
<a href >Specifications</a> ng-click="panel.selectTab(2)"
<a href ng-click="panel.selectTab(3) >Reviews</a> "
</li>
</ul>
panel.isSelected(1) <div class="panel" ng-show=" ">
</div>
</li>
<li
</li>
<li
<li
</li>
});
this.tab = 1;
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
this.tab = setTab;
};
function(setTab) { this.selectTab =
Challenges
Shaping Up with Angular
Level 3: Forms, Models, and Validations
More Directives: Forms & Models
How can I let my users add content?
Adding reviews to our products
app.js
app.controller("StoreController", function(){
this.products = [
{
name: 'Awesome Multi-touch Keyboard',
price: 250.00,
description: "...",
images: [...],
reviews: [
{
stars: 5,
body: "I love this product!",
author: "joe@thomas.com"
},
{
stars: 1,
body: "This product sucks",
author: "tim@hater.com"
}
. . .
. . .
<div class="panel" ng-show="panel.isSelected(3)">
<h4> Reviews </h4>

<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
</div>
Looping Over Reviews in our Tab
index.html
Were displaying Reviews!
Nothing new here, but how do we start to implement forms?
<h4> Reviews </h4>

<blockquote ng-repeat="review in product.reviews">...</blockquote>
Writing out our Review Form
index.html
<form name="reviewForm">
<select
<option value="1">1 star</option>
<option value="2">2 stars</option>
. . .
</select>
<textarea></textarea>
<label>by:</label>
<input type="email" />
<input type="submit" value="Submit" />
</form>
>
With Live Preview,.
index.html
<blockquote>
{{review.body}}
</blockquote>
How do we bind this review
object to the form?
. . .
</select>
<textarea></textarea>
<label>by:</label>
</form>
<select >
Introducing ng-model&,
index.html
ng-model="review.stars"
ng-model="review.body"
ng-model="review.author"
<select >
. . .
</select>
<textarea ></textarea>
<label>by:</label>
</form>
<blockquote>
{{review.body}}
</blockquote>
ng-model binds the
form element value
to the property
Live Preview In Action
But how do we actually add the new review?
<input ng-model="review.terms" type="checkbox" /> I agree to the terms
Two More Binding Examples
With a Checkbox
With Radio Buttons
Sets value to true or false
Sets the proper value based on which is selected
What color would you like?

<input ng-model="review.color" type="radio" value="red" /> Red
<input ng-model="review.color" type="radio" value="blue" /> Blue
<input ng-model="review.color" type="radio" value="green" /> Green
Challenges
We need to Initialize the Review
index.html
We could do ng-init, but
were better off
creating a controller.
<label>by:</label>
<input ng-model="review.author" type="email" />
</form>
{{review.body}}
</blockquote>
<blockquote>
<select ng-model="review.stars">
. . .
</select>
<textarea ng-model="review.body"></textarea>
Creating the Review Controller&
app.js
Now we need to update
all the Expressions to use
this controller alias.
index.html
ng-controller="ReviewController as reviewCtrl" <form name="reviewForm" >
{{review.body}}
</blockquote>
<select ng-model="review.stars">
. . .
</select>
<textarea ng-model="review.body"></textarea>
<blockquote>
app.controller("ReviewController", function(){
this.review = {};
});
Using the reviewCtrl.review
app.js
index.html
ng-controller="ReviewController as reviewCtrl"
reviewCtrl.
reviewCtrl.
reviewCtrl.
reviewCtrl.
reviewCtrl.
<form name="reviewForm" >
<blockquote>
<b>Stars: {{ review.stars}}</b>
{{ review.body}}
<cite>by: {{ review.author}}</cite>
</blockquote>
<select ng-model=" review.stars">
. . .
</select>
<textarea ng-model=" review.body"></textarea>
this.review = {};
});
Using ng-submit to make the Form Work^
app.js
index.html
ng-submit="reviewCtrl.addReview(product)"
We need to define
this function.
ng-submit allows us to call a function when the form is submitted.
this.review = {};
});
reviewCtrl.
reviewCtrl.
reviewCtrl.
ng-controller="ReviewController as reviewCtrl" <form name="reviewForm"
<blockquote>
{{ review.body}}
</blockquote>
>
reviewCtrl.
app.js
index.html
ng-controller="ReviewController as reviewCtrl"
reviewCtrl.
reviewCtrl.
ng-submit="reviewCtrl.addReview(product)"
Push review onto this
products reviews array.
this.review = {};
});
this.addReview = function(product) {
product.reviews.push(this.review);
};
<form name="reviewForm"
<blockquote>
{{ review.body}}
</blockquote>
Using ng-submit to make the Form Work^
Now with Reviews!
Review gets added,
but the form still has
all previous values!
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewCtrl.addReview(product)">
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
{{reviewCtrl.review.body}}
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
Resetting the Form on Submit
app.js
index.html
Clear out the review, so the form will reset.
this.review = {};
});
this.addReview = function(product) {
product.reviews.push(this.review);

};
this.review = {};
This Time the Form Resets However, if we refresh,
the reviews get reset!
Were not saving the
reviews anywhere yet...
Challenges
Turns out Angular has some great client side validations we can
use with our directives.
What about validations?
Our Old Form Code
index.html
ng-submit="reviewCtrl.addReview(product)">
<select ng-model="reviewCtrl.review.stars"
...
</select>
<textarea name="body" ng-model="reviewCtrl.review.body"></textarea>
<label>by:</label>
<input name="author" ng-model="reviewCtrl.review.author" type="email" />
</form>
>
Now with validation.
index.html
required
novalidate
required
required
Turn Off Default HTML Validation
Mark Required Fields
Print Forms Validity
<div> reviewForm is {{reviewForm.$valid}} </div>
ng-submit="reviewCtrl.addReview(product)" >
<select ng-model="reviewCtrl.review.stars"
...
</select>
>
<textarea name="body" ng-model="reviewCtrl.review.body" ></textarea>
<label>by:</label>
<input name="author" ng-model="reviewCtrl.review.author" type="email" />
</form>
With validations
We dont want the
form to submit
when its invalid.
ng-submit="reviewCtrl.addReview(product)" novalidate>
Preventing the Submit
index.html
We only want this method to be called if
reviewForm.$valid is true.
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
Preventing the Submit
index.html
If valid is false, then addReview is
never called.
Doesnt Submit an Invalid Form
How might we give a hint to the user
why their form is invalid?
The Input Classes
index.html
Source before typing email
<input name="author" ng-model="reviewCtrl.review.author" type="email" required />
<input name="author" . . . class="ng-pristine ng-invalid">
Source after typing, with invalid email
<input name="author". . . class="ng-dirty ng-invalid">
Source after typing, with valid email
<input name="author" . . . class="ng-dirty ng-valid">
So, lets highlight the form field using classes after we start typing,
showing if a field is valid or invalid. ng-valid ng-invalid
ng-dirty
.ng-invalid.ng-dirty {
border-color: #FA787E;
}

.ng-valid.ng-dirty {
border-color: #78FA89;
}
The classes
index.html
style.css
Red border for invalid
Green border for valid
<input name="author" ng-model="reviewCtrl.review.author" type="email" required />
Now with red and green borders!
Web forms usually have rules around valid input:
Angular JS has built-in validations for common input types:

HTML5-based type validations
<input type="email" name="email">
min=1 max=10
Can also define min
& max with numbers
<input type="url" name="homepage">
<input type="number" name="quantity">
Shaping Up with Angular JS
Level 4: Creating a Directive with an
Associated Controller
Decluttering our Code
index.html
Were going to have multiple pages that want to reuse this HTML
snippet.
How do we eliminate this duplication?
<h3>
{{product.name}}
<em class="pull-right">${{product.price}}</em>
</h3>
<section ng-controller="PanelController as panel">
. . .
Using ng-include for Templates
index.html
product-title.html
<h3 ng-include="'product-title.html'" class="ng-scope">
<span class="ng-scope ng-binding">Awesome Multi-touch Keyboard</span>
<em class="pull-right ng-scope ng-binding">$250.00</em>
</h3>
generated html
ng-include is expecting a variable with the name of the file to include.
To pass the name directly as a string, use single quotes ('...')
<h3
name of file to include
ng-include="'product-title.html'"
</h3>
>
{{product.name}}
Web Server
HTML JavaScript
Web Browser
HTML Returned
Fetches ng-included file
HTML
Browser loads up
Angular app.
<h3 ng-include="'product-title.html'"></h3>
Creating our First Custom Directive
index.html
Custom Directive
Using ng-include...
Our old code and our custom Directive will do the same thing...
with some additional code.
<product-title></product-title>
index.html
Why write a Directive?
Why Directives?
Directives allow you to write HTML that expresses the behavior
of your application.
C
a
n

y
o
u

t
e
ll
w
h
a
t

t
h
is

d
o
e
s
?
<aside class="col-sm-3">
<book-cover></book-cover>
<h4><book-rating></book-rating></h4>
</aside>

<div class="col-sm-9">
<h3><book-title></book-title></h3>

<book-authors></book-authors>

<book-review-text></book-review-text>

<book-genres></book-genres>
</div>
Template-expanding Directives are the simplest:
define a custom tag or attribute that is expanded or replaced
can include Controller logic, if needed

Writing Custom Directives
Directives can also be used for:
Expressing complex UI
Calling events and registering event handlers
Reusing common components
app.directive('productTitle', function(){
return {

};
});
How to Build Custom Directives
app.js
index.html
A configuration object defining how your directive will work
return {

};
});
app.js
index.html
<h3>
{{product.name}}
<em class="pull-right">$250.00</em>
</h3>
index.html
Type of Directive
(E for Element)
Url of a template
generates
into
restrict: 'E',
templateUrl: 'product-title.html'
camelCase in JavaScript dash in HTML translates to ...
index.html
Attribute vs Element Directives
Element Directive
Attribute Directive
some browsers dont like self-closing tags.
Use Element Directives for UI widgets and Attribute Directives for
mixin behaviors... like a tooltip.
index.html
Notice were not using a self-closing tag
<h3 product-title></h3>
<product-title/>
index.html
Defining an Attribute Directive
app.js
<h3>
{{product.name}}
</h3>
index.html
generates
into
return {

};
});
Though normally attributes would be for mixin behaviors ...
restrict: 'A',
Type of Directive
(A for Attribute)
When you think of a dynamic web application, do you think
youll be able to understand the functionality just by looking at
the HTML?
Directives allow you to write better HTML
When you're writing an Angular JS application, you should be
able to understand the behavior and intent from just the HTML.
No, right?
And youre likely using custom directives to write expressive
HTML.
Creating Our Own Directives
<h3>
{{product.name}}
</h3>
Reviewing our Directive
index.html
Template-Expanding Directives
An Attribute Directive
An Element Directive
<h3> <product-title></product-title> </h3>
What if we need a Controller?
index.html
}
Directive?
ng-controller="PanelController as panels"
<ul class="nav nav-pills"> . . . </ul>
<div class="panel" ng-show="panels.isSelected(1)"> . . . </div>
</section>
> <section
First, extract the template...
product-panels.html
index.html
> <section
</section>
<h3> <product-title> </h3>
. . .
</product-panels>
<product-panels >
Now write the Directive ...
app.js
index.html
. . .
</product-panels>
<product-panels >
app.directive('productPanels', function(){
return {
restrict: 'E',
templateUrl: 'product-panels.html'
};
});
What about the Controller?
app.js
index.html
. . .
</product-panels>
<product-panels >
return {
restrict: 'E',
};
});
app.controller('PanelController', function(){
. . .
});
First we need to move the functionality inside the directive
Moving the Controller Inside
app.js
index.html
. . .
</product-panels>
<product-panels >
return {
restrict: 'E',
};
});
,
Next, move the alias inside
function(){
. . .
controller:
}
Need to Specify the Alias
app.js
index.html
Now it works, using panels as our Controller Alias.
. . .
</product-panels>
<product-panels>
controllerAs: 'panels'
};
});
return {
restrict: 'E',
};
});
,
,
function(){
. . .
controller:
}
Challenges
Level 4: Creating a Directive with an
Associated Controller
Decluttering our Code
index.html
Were going to have multiple pages that want to reuse this HTML
snippet.
How do we eliminate this duplication?
<h3>
{{product.name}}
</h3>
. . .
Using ng-include for Templates
index.html
product-title.html
<h3 ng-include="'product-title.html'" class="ng-scope">
<span class="ng-scope ng-binding">Awesome Multi-touch Keyboard</span>
<em class="pull-right ng-scope ng-binding">$250.00</em>
</h3>
generated html
ng-include is expecting a variable with the name of the file to include.
To pass the name directly as a string, use single quotes ('...')
<h3
name of file to include
ng-include="'product-title.html'"
</h3>
>
{{product.name}}
Web Server
HTML JavaScript
Web Browser
HTML Returned
Fetches ng-included file
HTML
Browser loads up
Angular app.
<h3 ng-include="'product-title.html'"></h3>
Creating our First Custom Directive
index.html
Custom Directive
Using ng-include...
Our old code and our custom Directive will do the same thing...
with some additional code.
index.html
Why write a Directive?
Why Directives?
Directives allow you to write HTML that expresses the behavior
of your application.
C
a
n

y
o
u

t
e
ll
w
h
a
t

t
h
is

d
o
e
s
?
<aside class="col-sm-3">
<book-cover></book-cover>
<h4><book-rating></book-rating></h4>
</aside>

<div class="col-sm-9">
<h3><book-title></book-title></h3>

<book-authors></book-authors>

<book-review-text></book-review-text>

<book-genres></book-genres>
</div>
Template-expanding Directives are the simplest:
define a custom tag or attribute that is expanded or replaced
can include Controller logic, if needed

Writing Custom Directives
Directives can also be used for:
Expressing complex UI
Calling events and registering event handlers
Reusing common components
return {

};
});
app.js
index.html
A configuration object defining how your directive will work
return {

};
});
app.js
index.html
<h3>
{{product.name}}
</h3>
index.html
Type of Directive
(E for Element)
Url of a template
generates
into
restrict: 'E',
camelCase in JavaScript dash in HTML translates to ...
index.html
Attribute vs Element Directives
Element Directive
Attribute Directive
some browsers dont like self-closing tags.
Use Element Directives for UI widgets and Attribute Directives for
mixin behaviors... like a tooltip.
index.html
Notice were not using a self-closing tag
<product-title/>
index.html
Defining an Attribute Directive
app.js
<h3>
{{product.name}}
</h3>
index.html
generates
into
return {

};
});
Though normally attributes would be for mixin behaviors ...
restrict: 'A',
Type of Directive
(A for Attribute)
When you think of a dynamic web application, do you think
youll be able to understand the functionality just by looking at
the HTML?
Directives allow you to write better HTML
When you're writing an Angular JS application, you should be
able to understand the behavior and intent from just the HTML.
No, right?
And youre likely using custom directives to write expressive
HTML.
Creating Our Own Directives
<h3>
{{product.name}}
</h3>
Reviewing our Directive
index.html
Template-Expanding Directives
An Attribute Directive
An Element Directive
<h3> <product-title></product-title> </h3>
What if we need a Controller?
index.html
}
Directive?
</section>
> <section
First, extract the template...
product-panels.html
index.html
> <section
</section>
<h3> <product-title> </h3>
. . .
</product-panels>
<product-panels >
Now write the Directive ...
app.js
index.html
. . .
</product-panels>
<product-panels >
return {
restrict: 'E',
};
});
What about the Controller?
app.js
index.html
. . .
</product-panels>
<product-panels >
return {
restrict: 'E',
};
});
app.controller('PanelController', function(){
. . .
});
First we need to move the functionality inside the directive
Moving the Controller Inside
app.js
index.html
. . .
</product-panels>
<product-panels >
return {
restrict: 'E',
};
});
,
Next, move the alias inside
function(){
. . .
controller:
}
Need to Specify the Alias
app.js
index.html
Now it works, using panels as our Controller Alias.
. . .
</product-panels>
<product-panels>
controllerAs: 'panels'
};
});
return {
restrict: 'E',
};
});
,
,
function(){
. . .
controller:
}
Challenges
Level 5: Dependencies and Services
(function(){
var app = angular.module('store', [
Starting to get a bit cluttered?
app.js
Can we refactor
these out?
. . .
})();
app.controller('StoreController', function(){ . . . });
]);
app.directive('productTitle', function(){ . . . });

app.directive('productGallery', function(){ . . . });

app.directive('productPanels', function(){ . . . });
(function(){
Extract into a new file ... products.js
app.js
. . .
})();
]);
products.js


(function(){
Make a new Module
app.js
. . .
})();
]);
products.js
(function(){
var app = angular.module('store
})();
-products', [ ]);
Define a new module just
for Product stuff...
Module Name
Different closure
means different
app variable.


(function(){
Add it to the dependencies ...
app.js
. . .
})();
]);


products.js
(function(){
var app = angular.module('store
})();
-products', [ ]);
'store-products'
Module Name
store depends on
store-products
<!DOCTYPE html>
<head> . . . </head>
. . .
<script src="angular.js"></script>
<script src="app.js"></script>
Well also need to include the file
index.html
</body>
</html>
<script src="products.js"></script>
Best to split Modules around functionality:
app.js top-level module attached via ng-app
products.js all the functionality for products and only products

How should I organize my application Modules?
Challenges
Does this feel strange?
app.js
What is all this data
doing here?
Where can we put it?
Shouldn't we fetch this from an API?
(function(){
var app = angular.module('store', [ 'store-products' ]);

this.products = [
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
. . .
});
})();
. . .
];
How do we get that data?
app.js
How do we fetch our
products from an API?
http://api.example.com/products.json
(function(){

this.products = ???;
. . .
});
})();
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
[
. . .
]
Services give your Controller additional functionality, like ...
Fetching JSON data from a web service with $http
Logging messages to the JavaScript console with $log
Filtering an array with $filter

We need a Service!
All built-in Services
start with a $
sign ...
The $http Service is how we make an async request to a server ...
By using $http as a function with an options object:

Introducing the $http Service!
S
o how
do w
e
us
e
it
?
$http({ method: 'GET', url: '/products.json' });
Or using one of the shortcut methods:

$http.get('/products.json', { apiKey: 'myApiKey' });
Both return a Promise object with .success() and .error()
If we tell $http to fetch JSON, the result will be automatically

decoded into JavaScript objects and arrays
Use this funky array syntax:
app.controller('SomeController', [ '$http', function($http){

} ]);
How does a Controller use a Service like $http?
Service name
Service name as an argument
D
ependency Injection!
app.controller('SomeController', [ '$http', '$log', function($http, $log){

} ]);
If you needed more than one
When Angular is Loaded Services are Registered
SomeController
$http
Injector
$log

} ]);

} ]);
A Controller is Initialized
SomeController $http
Injector
$log
and $log, too ...
I need $http ...
Psst...
When I run...

} ]);
Then When the Controller runs ...
SomeController $http
Injector
$log
Here ya go!
D
e
p
e
n
d
e
n
c
y

In
j
e
c
t
io
n
!
(function(){

app.controller('StoreController',
So where were we?
app.js
){ function(
); }
})();
(function(){

Time for your injection!
app.js
){ function(
); }
})();
[ '$http',
StoreController needs
the $http Service...
...so $http
gets injected
as an argument!
Now what?
$http
(function(){

Lets use our Service!
app.js
){ function(
); }
})();
[ '$http', $http
$http.get('/products.json')
Fetch the contents of
products.json...
(function(){

Our Service will Return Data
app.js
){ function(
); }
})();
[ '$http', $http
$http.get('/products.json').success(function(data){
???
});
= data;
$http returns a Promise, so
success() gets the data...
What do we assign
data to, though...?
(function(){

Storing the Data for use in our Page
app.js
){ function(
); }
})();
[ '$http', $http
});
= data;
var store = this;
store.products
We need to store what this is ...
... and now we have somewhere
to put our data!
But the page might look funny until the data loads.
(function(){

Initialize Products to be a Blank Array
app.js
){ function(
); }
})();
[ '$http', $http
});
= data;
var store = this;
store.products
store.products = [ ];
We need to initialize products to an empty
array, since the page will render before our
data returns from our get request.
$http.post('/path/to/resource.json', { param: 'value' });
Additional $http functionality
$http({ method: 'PATCH', url: '/path/to/resource.json' });
$http({ method: 'TRACE', url: '/path/to/resource.json' });
In addition to get() requests, $http can post(), put(), delete()...
$http.delete('/path/to/resource.json');
$http({ method: 'OPTIONS', url: '/path/to/resource.json' });
...or any other HTTP method by using a config object:
Challenges

Angularjs

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Angularjs

Hochgeladen von

Copyright:

Verfügbare Formate

Shaping Up with Angular

Level 1: Getting Started

Angular helps you organize your JavaScript

Angular helps create responsive (as in fast) websites.

Angular plays well with jQuery

Angular is easy to test

Where we write pieces of our Angular application.

Makes our code more maintainable, testable, and readable.

Where we define dependencies for our app.

tab === 1">

tab === 1">

tab === 1">

tab === 1">

Angular JS has built-in validations for common input types:

define a custom tag or attribute that is expanded or replaced

can include Controller logic, if needed

define a custom tag or attribute that is expanded or replaced

can include Controller logic, if needed

app.js top-level module attached via ng-app

products.js all the functionality for products and only products

Fetching JSON data from a web service with $http

Logging messages to the JavaScript console with $log

Filtering an array with $filter

By using $http as a function with an options object:

Or using one of the shortcut methods:

Both return a Promise object with .success() and .error()

If we tell $http to fetch JSON, the result will be automatically

Das könnte Ihnen auch gefallen