Angularjs

(1)

(2)

Shaping Up with Angular

Level 1: Getting Started

(3)

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

(4)

Why Angular?

If you’re 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

(5)

Traditional Page-Refresh

Screencast: Request-Response Application

NOTE: Time between user  

(6)

Web Server

HTML JavaScript

Response with Webpage & Assets

Web Browser

URL Request to server

Response with Webpage & Assets

User clicks on link, new Request

HTML JavaScript

Browser loads up

entire webpage.

Browser loads up

(7)

Screencast: Request-Response Application

NOTE: Note how responsive the page is

(8)

Web Server

Response with Webpage

& Assets

Web Browser

URL Request to

server

Response with JSON

Data

User clicks on link,

new Request

HTML JavaScript

DATA

Browser loads up

entire webpage.

Data is loaded into

existing page.

(9)

Modern API-Driven Application

HTML

Browser

App

Data Source

Mobile

App

Developers

Server

API

(10)

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!');  } 

(){ >

(11)

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

(12)

The Flatlanders Store!

Screencast: Flatlanders Store

Fully Functional

(13)

Download AngularJS

http

://angularjs.org/

We’ll need angular.min.js

Downloading the libraries

Download Twitter Bootstrap

http://getbootstrap.com/

We’ll need bootstrap.min.css

(14)

<!DOCTYPE html> 

<body> 

</body>  </html>

Getting Started

index.html

Twitter Bootstrap

AngularJS

(15)

Modules

• Where we write pieces of our Angular application.

• Makes our code more maintainable, testable, and readable.

• Where we define dependencies for our app.

(16)

Creating Our First Module

Dependencies

Other libraries we might need.   We have none... for now…

Application

Name

AngularJS

(17)

Including Our Module

var app = angular.module('store', [ ]); _app.js

index.html

<!DOCTYPE html> 

<body> 

</body> 

(18)

Including Our Module

<!DOCTYPE html> 

<body> 

</body> 

</html>

Run this module when

the document loads.

(19)

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> 

(20)

Including Our Module

<!DOCTYPE html> 

<body> 

<p>{{"hello" + " you"}}</p>

</body> 

(21)

(22)

Working With Data

...just a simple

object we want to

print to the page.

var gem = { 

name: 'Dodecahedron',  price: 2.95, 

description: '. . .',  }.

(23)

Controllers

app.js

Notice that controller is attached to (inside) our app.

Controllers are where we define our app’s behavior by defining

functions and values.

Wrapping your Javascript

in a closure is a good habit!

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .',  }. })(); (function(){ 

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

app.controller('StoreController', function(){   

(24)

Storing Data Inside the Controller

app.js

Now how do we

print out this

data inside our

webpage?

this.product = gem; var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .',  }. })(); (function(){ 

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

app.controller('StoreController', function(){   

(25)

<!DOCTYPE html> 

</body>

Our Current HTML

Lets load our data into

this part of the page.

}

(26)

<body>  <div>  <h1> Product Name </h1>  <h2> $Product Price </h2>  <p> Product Description </p>  </div> 

</body>

(function(){ 

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

app.controller('StoreController', function(){  this.product = gem;

}); . . .

})(); _app.js

index.html

(27)

<body> 

<div ng-controller="StoreController as store">  <h1> Product Name </h1> 

<h2> $Product Price </h2> 

<p> Product Description </p>  </div> 

</body>

Attaching the Controller

(function(){ 

}); . . .

})(); _app.js

index.html

Controller name

Alias

(28)

<body> 

! !

</div> 

</body> _index.html

Displaying Our First Product

(function(){ 

}); . . . })(); _app.js <h1> {{store.product.name}} </h1>  <h2> ${{store.product.price}} </h2>  <p> {{store.product.description}} </p>

(29)

Understanding Scope

Would never print a value!

The scope of

the Controller

is only inside

here...

}

{{store.product.name}} <h1> {{store.product.name}} </h1>  <h2> ${{store.product.price}} </h2>  <p> {{store.product.description}} </p> <body> 

! !

</div> 

(30)

(31)

</div> 

</body>

<body ng-controller="StoreController as store">  <div>  <h1> {{store.product.name}} </h1>  <h2> ${{store.product.price}} </h2>  <p> {{store.product.description}} </p>

Adding A Button

index.html var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }.

(32)

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }. canPurchase: false </div> 

</body>

Adding A Button

index.html

<button

_{only show this}

How can we

button...

...when this is true?

Directives t

_o

the rescue!

<h1> {{store.product.name}} </h1>  <h2> ${{store.product.price}} </h2> 

<p> {{store.product.description}} </p>

(33)

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }. canPurchase: false </div> 

</body>

NgShow Directive

index.html

<button

ng-show="store.product.canPurchase"> Add to Cart </button>

Will only show the element if the

(34)

(35)

</div> 

</body> _index.html

<button

<body ng-controller="StoreController as store">  <div 

NgHide Directive

If the product is sold out

we want to hide it.

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }. canPurchase: true, soldOut: true >

(36)

</div> 

</body> _index.html

<button

NgHide Directive

If the product is sold out

we want to hide it.

This is awkward and

a good example to

use ng-hide!

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }. canPurchase: true, soldOut: true, ng-show="!store.product.soldOut">

(37)

</div> 

</body> _index.html

<button

NgHide Directive

If the product is sold out

we want to hide it.

Much better!

var gem = {  name: 'Dodecahedron',  price: 2.95,  description: '. . .', }. canPurchase: true, soldOut: true, ng-hide="store.product.soldOut">

(38)

Multiple Products

app.js var gem =   name: "Dodecahedron",  price: 2.95,  description: ". . .",  canPurchase: true,  },  {

app.controller('StoreController', function(){  this.product = gem 

}); 

(39)

Multiple Products

app.js var gems = [    name: "Dodecahedron",  price: 2.95,  description: ". . .",  canPurchase: true,  },  { 

name: "Pentagonal Gem",  price: 5.95, 

description: ". . .",  canPurchase: false,  }… 

];

{

Now we have an array...

How might we display all these

products in our template?

Maybe a

Directive?

app.controller('StoreController', function(){  this.products = gems 

}); 

;

(40)

Working with An Array

index.html <body ng-controller="StoreController as store"> 

<div> 

<h1> {{store.products[0].name}} </h1>  <h2> ${{store.products[0].price}} </h2> 

<p> {{store.products[0].description}} </p> 

</div>  . . .  </body>

(41)

index.html

Working with An Array

. . .  </body>

Displaying the first product

is easy enough...

<p> {{store.products[0].description}} </p>  <button ng-show=" 

Add to Cart</button>  </div>

(42)

Working with An Array

<div 

<p> {{store.products[0].description}} </p>  <button ng-show=" 

Add to Cart</button>  </div> . . .  </body> <div>  <h1> {{store.products[1].name}} </h1>  <h2> ${{store.products[1].price}} </h2>  <p> {{store.products[1].description}} </p> 

</div>

Why repeat yourself?

Why... You get it.

>

store.products[0].canPurchase">

(43)

Working with An Array

<div 

<h1> {{product.name}} </h1>  <h2> ${{product.price}} </h2> 

<p> {{product.description}} </p>  <button ng-show=" 

Add to Cart</button>  </div>

. . .  </body>

ng-repeat="product in store.products"

products >

Repeat this

section for

each product.

}

.canPurchase">

(44)

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

(45)

(46)

(47)

(48)

Shaping Up with Angular.JS

Level 2: Filters, Directives, and Cleaner Code

(49)

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>

(50)

Our Current Code

index.html

<em class="pull-right">${{product.price}}</em>

</h3>  </li>  </ul> 

</body>

There’s a better way

to print out prices.

(51)

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>

<li class="list-group-item" ng-repeat="product in store.products">  <h3>   {{product.name}} </h3>  </li>  </ul>  </body>

$2.00

(52)

Formatting with Filters

*Our Recipe

date

12/27/2013 @ 12:50AM

uppercase & lowercase

Octagon Gem

limitTo

My Descr

orderBy

Will list products by descending price.

Without the

-

products would list in ascending order.

(53)

var gems = [ 

{ name: 'Dodecahedron Gem', price: 2.95,  description: '. . .',  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:

(54)

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

(55)

(56)

(57)

More With Directives

How can I make my application

more interactive?

(58)

A Simple Set of Tabs

index.html

<li> <a href <li> <a href <li> <a href >Description</a> </li> >Specifications</a> </li> >Reviews</a> </li> </ul> </section>

(59)

Introducing a new Directive!

index.html

Assigning a value to

tab

_.

For now just print this value to the screen.

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

(60)

(61)

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.

(62)

<div class="panel"

Let’s 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> 

</div>

<h4>Reviews</h4> 

</div>

>

tabs are up here...

. . .

(63)

Let’s add the tab content panels

Now when a tab is selected it will show the appropriate panel!

> > <h4>Description</h4>  <p>{{product.description}}</p>  </div> <h4>Specifications</h4> 

</div>

<h4>Reviews</h4> 

</div>

ng-show="tab === 1"

ng-show="tab === 2"

ng-show="tab === 3"

<div class="panel"

show the panel

if tab is the

right number

(64)

But how do we set an

initial value for a tab?

(65)

Setting the Initial Value

index.html

ng-init

allows us to evaluate an expression in the current scope.

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

(66)

(67)

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>

(68)

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 }" ng-class="{ active:tab === 2 }" ng-class="{ active:tab === 3 }" <a href <a href <a href

(69)

(70)

Feels dirty, doesn’t it?

All our application’s 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-click="tab = 3"

ng-class="{ active:tab === 1 }">

ng-class="{ active:tab === 2 }">

ng-class="{ active:tab === 3 }">

<div class="panel" ng-show="

<h4>Description </h4>  <p>{{product.description}}</p>  </div> … tab === 1"> ng-init="tab = 1">

(71)

Creating our Panel Controller

index.html

app.js

ng-init="tab = 1"

<section

<li > <a href >Description</a> <li </li> > <a href >Specifications</a> <li </li> > <a href >Reviews</a> </li> </ul>

ng-controller="PanelController as panel"

app.controller("PanelController", function(){ }); ng-click="tab = 1" " tab = 2 ng-click=" ng-click="tab = 3"

<h4>Description </h4>  <p>{{product.description}}</p>  </div> … tab === 1"> >

(72)

Moving our tab initializer

index.html

app.js

<section

<li > <a href >Description</a> <li </li> > <a href >Specifications</a> <li </li> > <a href _>_Reviews_</_a_> </li> </ul>

app.controller("PanelController", function(){ });

this.tab = 1;

<a href ng-click="tab = 1"

<a href ng-click="tab = 2"

<a _{href ng-click}₌_"_{tab = 3}_"

<h4>Description </h4> 

<p>{{product.description}}</p>  </div>

…

tab === 1">

(73)

Creating our selectTab function

index.html

app.js

<section

ng-controller="PanelController as panel">

<li >

<a href ng-click="panel.selectTab(1)">Description</a>

>

<a href ng-click="panel.selectTab(2)">Specifications</a>

</li>

<li >

<a href ng-click="panel.selectTab(3) >Reviews</a>

</li> </ul>

"

app.controller("PanelController", function(){

}); this.tab = 1; ng-class="{ active: ng-class="{ active: ng-class="{ active: }"> }"> }"> tab === 1 tab === 2 tab === 3

<h4>Description </h4> 

<p>{{product.description}}</p>  </div>

…

tab === 1">

this.tab = setTab; };

function(setTab) { this.selectTab =

(74)

Creating our isSelected function

index.html

app.js

<section

ng-controller="PanelController as panel">

<a href ng-click="panel.selectTab(1)" >Description</a>

<a href ng-click="panel.selectTab(2)">Specifications</a>

<a href ng-click="panel.selectTab(3)">Reviews</a>

</li> </ul>

panel.isSelected(1) <div class="panel" ng-show=" "> <h4>Description </h4>  <p>{{product.description}}</p>  </div> … </li> <li </li> <li <li </li>

app.controller("PanelController", function(){

});

this.tab = 1;

this.isSelected = function(checkTab){ return this.tab === checkTab;

};

this.tab = setTab; };

function(setTab) { this.selectTab =

(75)

(76)

(77)

(78)

(79)

Shaping Up with Angular

Level 3: Forms, Models, and Validations

(80)

More Directives: Forms & Models

(81)

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: "[email protected]" 

},  {  

stars: 1, 

body: "This product sucks",  author: "[email protected]" 

} 

(82)

<li class="list-group-item" ng-repeat="product in store.products">  . . . 

<div class="panel" ng-show="panel.isSelected(3)">  <h4> Reviews </h4> 

<blockquote ng-repeat="review in product.reviews">  <b>Stars: {{review.stars}}</b> 

<cite>by: {{review.author}}</cite>   </blockquote> 

</div> 

Looping Over Reviews in our Tab

(83)

We’re displaying Reviews!

(84)

<h4> Reviews </h4>   

Writing out our Review Form

index.html

<select

<option value="1">1 star</option>  <option value="2">2 stars</option>  . . . 

</select>

</form>

(85)

With Live Preview

,.

index.html

<b>Stars: {{review.stars}}</b>  {{review.body}}  

<cite>by: {{review.author}}</cite>   </blockquote>

How do we bind this review

object to the form?

</select>

</form>

(86)

Introducing ng-model

&,

index.html

ng-model="review.stars" ng-model="review.body" ng-model="review.author" <select >

</select>

</form>

<b>Stars: {{review.stars}}</b>  {{review.body}}  

<cite>by: {{review.author}}</cite>   </blockquote>

ng-model binds the

form element value

to the property

(87)

Live Preview In Action

(88)

<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  

(89)

(90)

We need to Initialize the Review

index.html

We could do

ng-init

, but

we’re better off

creating a controller.

</form>

<b>Stars: {{review.stars}}</b> {{review.body}}

<cite>by: {{review.author}}</cite>

</blockquote> <blockquote>

</select>

(91)

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"

<b>Stars: {{review.stars}}</b> {{review.body}}

<cite>by: {{review.author}}</cite>

</blockquote>

</select>

app.controller("ReviewController", function(){  this.review = {};

(92)

Using the reviewCtrl.review

app.js

index.html

reviewCtrl. reviewCtrl.

reviewCtrl.

<b>Stars: {{ review.stars}}</b> {{ review.body}}

<cite>by: {{ review.author}}</cite>

</blockquote>

<option value="2">2 stars</option>  . . . 

</select>

<textarea ng-model=" review.body"></textarea> app.controller("ReviewController", function(){ 

this.review = {}; });

(93)

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.

});

reviewCtrl. reviewCtrl.

reviewCtrl.

</blockquote>

(94)

reviewCtrl.

app.js

index.html

reviewCtrl.

ng-submit="reviewCtrl.addReview(product)"

Push

review

onto this

product’s

reviews

array.

});

this.addReview = function(product) { product.reviews.push(this.review); };

</blockquote>

(95)

Now with Reviews!

Review gets added,

but the form still has

all previous values!

(96)

<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.addReview = function(product) { product.reviews.push(this.review);

};

(97)

This Time the Form Resets

However, if we refresh,

the reviews get reset! 

We’re not saving the

(98)

(99)

Turns out Angular has some great client side validations we can

use with our directives.

(100)

Our Old Form Code

index.html

ng-submit="reviewCtrl.addReview(product)">

<select ng-model="reviewCtrl.review.stars"

... 

</select>

(101)

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>

>

(102)

With validations

We don’t want the

form to submit

(103)

ng-submit="reviewCtrl.addReview(product)" novalidate>

Preventing the Submit

index.html

We only want this method to be called if

(104)

ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>

Preventing the Submit

index.html

If valid is

false

, then

addReview

is

(105)

Doesn’t Submit an Invalid Form

How might we give a hint to the user

why their form is invalid?

(106)

The Input Classes

index.html

Source before typing email

Source after typing, with invalid email

Source after typing, with valid email

So, lets highlight the form field using classes after we start typing,

showing if a field is valid or invalid.

ng-valid ng-invalid

(107)

.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

(108)

(109)

Web forms usually have rules around valid input:

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

HTML5-based type validations

min=1 max=10

Can also define min

& max with numbers

(110)

(111)

(112)

Shaping Up with Angular JS

Level 4: Creating a Directive with an

(113)

Decluttering our Code

index.html

We’re going to have multiple pages that want to reuse this HTML

snippet.

How do we eliminate this duplication?

<em class="pull-right">${{product.price}}</em> </h3>

(114)

Using

_{ng-include for Templates}

index.html

product-title.html

<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

('...')

<li class="list-group-item" ng-repeat="product in store.products"> <h3 ng-include="'product-title.html'"

name of file to include

</h3>

>

(115)

(116)

Web Server

HTML JavaScript

Response with Webpage & Assets

Web Browser

URL Request to server

HTML Returned

Fetches ng-included file

_HTML

Browser loads up

Angular app.

(117)

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

(118)

Why Directives?

Directives allow you to write HTML that expresses the behavior

of your application.

Can you

tell what

this doe

s?

<book-cover></book-cover> 

(119)

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

(120)

app.directive('productTitle', function(){  return { ! };  });

How to Build Custom Directives

app.js

_index.html

(121)

app.directive('productTitle', function(){  return { ! ! };  });

How to Build Custom Directives

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

(122)

(123)

index.html

Attribute vs Element Directives

Element Directive

Attribute Directive

…some browsers don’t like self-closing tags.

Use Element Directives for UI widgets and Attribute Directives for

mixin behaviors... like a tooltip.

index.html

Notice we’re not using a self-closing tag…

(124)

index.html

Defining an Attribute Directive

app.js

_index.html

generates

into

app.directive('productTitle', function(){  return {

!

};  });

Though normally attributes would be for mixin behaviors ...

restrict: 'A',

Type of Directive 

(A for Attribute)

(125)

When you think of a dynamic web application, do you think

you’ll 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 you’re likely using custom directives to write expressive

HTML.

(126)

Shaping Up with Angular JS

Creating Our Own Directives

(127)

<h3>  

<em class="pull-right">${{product.price}}</em>

</h3>

Reviewing our Directive

index.html

Template-Expanding Directives

An Attribute Directive

An Element Directive

(128)

What if we need a Controller?

index.html

}

Directive?

ng-controller="PanelController as panels"

> <section

(129)

First, extract the template...

product-panels.html

index.html

> <section

. . .

</product-panels>

(130)

Now write the Directive ...

app.js

index.html

. . .

</product-panels>

<product-panels >

app.directive('productPanels', function(){  return {

restrict: 'E',

templateUrl: 'product-panels.html'

};  });

(131)

What about the Controller?

app.js

index.html

. . .

</product-panels>

<product-panels >

app.directive('productPanels', function(){  return {

restrict: 'E',

templateUrl: 'product-panels.html'

};  });

app.controller('PanelController', function(){ . . .

});

(132)

Moving the Controller Inside

app.js

index.html

. . .

</product-panels>

<product-panels >

app.directive('productPanels', function(){  return { restrict: 'E', templateUrl: 'product-panels.html' };  }); ,

Next, move the alias inside

function(){ . . .

controller:

(133)

Need to Specify the Alias

app.js

index.html

Now it works, using

panels

as our Controller Alias.

. . . </product-panels> <product-panels> controllerAs: 'panels' }; });

app.directive('productPanels', function(){  return { restrict: 'E', templateUrl: 'product-panels.html' };  }); , , function(){ . . . controller: }

(134)

(135)

(136)

(137)

(138)

Shaping Up with Angular JS

Level 4: Creating a Directive with an

(139)

Decluttering our Code

index.html

We’re going to have multiple pages that want to reuse this HTML

snippet.

How do we eliminate this duplication?

<em class="pull-right">${{product.price}}</em> </h3>

(140)

Using

_{ng-include for Templates}

index.html

product-title.html

<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

('...')

<li class="list-group-item" ng-repeat="product in store.products"> <h3 ng-include="'product-title.html'"

name of file to include

</h3>

>

(141)

(142)

Web Server

HTML JavaScript

Response with Webpage & Assets

Web Browser

URL Request to server

HTML Returned

Fetches ng-included file

_HTML

Browser loads up

Angular app.

(143)

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

(144)

Why Directives?

Directives allow you to write HTML that expresses the behavior

of your application.

Can you

tell what

this doe

s?

<book-cover></book-cover> 