angular js level 01-05

7/25/2019 angular js level 01-05

1/164


2/164

Shaping Up with Angular

Level 1: Getting Started


3/164

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 jQueryRuby on Rails

Python, PHP, etc

Databases


4/164

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


5/164

Traditional Page-Refresh

Screencast: Request-Response Application

NOTE: Time between user

interaction and response.


6/164

Web Server

HTML Java

Response with Webpage & Assets

Web Browser

URL Request to server


User clicks on link, new Request HTML Java

Browser load

entire webp

Browser load

entire webp


7/164

Screencast: Request-Response ApplicationNOTE: Note how responsive the page is

A responsive website using Angular


8/164

Web Server


Web Browser

URL Request toserver

Response with JSON Data

User clicks on link,new Request

HTML JavaS

DATA

Browser loa

entire webp

Data is loade

existing p


9/164

Modern API-Driven Application

HTML BrowsApp

Data

Source

MobileApp

Developers

Server

API


10/164

A client-side JavaScript Framework for adding interactivity to

index.html

How do we tell our HTMLwhen to trigger ourJavaScript?

What is Angular JS?


11/164


12/164

The Flatlanders Store!

Screencast: Flatlanders Store

Fully Functional


13/164

Download AngularJS http://angularjs.org/

Well needangular.min.js

Downloading the libraries

Download Twitter Bootstrap http://getbootstrap.com/

Well needbootstrap.min.css


14/164


15/164

Modules

Where we write pieces of our Angular application.

Makes our code more maintainable, testable, and reada Where we define dependencies for our app.

Modules can use other Modules...


16/164

Creating Our First Module

DependenciesOther libraries we might need.

We have none... for now

Application

NameAngularJS

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


17/164

Including Our Module

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


18/164




19/164

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

I am {{4 + 6}}

{{"hello" + " you"}}

I am 10

hello you


20/164




21/164

Challenges


22/164

Working With Data

...just a simple

object we want toprint to the page.

vargem ={

name: 'Dodecahedron',

price: 2.95,

description: '. . .',

}.


23/164

Controllers

app.js

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

Controllers are where we define our apps behavior by de

functions and values.

Wrapping your Javascriptin a closure is a good habit!

vargem ={

name: 'Dode

price: 2.95

description

}.

})();

(function(){


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

});


24/164

Storing Data Inside the Controller

app.js

Now hoprint odata in

webpthis.product =gem;

vargem ={

name: 'Dodecahedron', price: 2.95,


}.

})();

(function(){



});


25/164


26/164

Product Name

$Product Price

Product Description

(function(){



this.product =gem;

});

. . .

})();

app.js

index.html

Attaching the Controller


27/164

Product Name

$Product Price

Product Description

Attaching the Controller

(function(){



this.product =gem;

});

. . .

})();

app.js

index.html

Controller name AliasDirective


28/164

index.html

Displaying Our First Product

(function(){



this.product =gem;

});

. . .

})();

app.js

{{store.product.name}}

${{store.product.price}}

{{store.product.description}}


29/164

Understanding Scope

Would never print avalue!

}{{store.product.name}}





30/164

Challenges

Addi A B


31/164




Adding A Button

index.html

vargem ={


price: 2.95,


}.

Addi A B


32/164

vargem ={


price: 2.95,


}.

canPurchase: false

Adding A Button

index.html

Add to Cart

N Sh Di ti


33/164

vargem ={


price: 2.95,


}.

canPurchase: false

NgShow Directive

index

Add to Cart


34/164

N Hid Di ti


35/164

index


36/164

index


37/164

index


38/164

Multiple Products

vargem =

name: "Dodecahedron",

price: 2.95,

description: ". . .",

canPurchase: true,

},

{


this.product =gem

});

;

Multiple Products


39/164

Multiple Products

vargems =[

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 thesproducts in our template?

MaybeaDirective?


this.products =gems

});

;

So we have multiple products...

Working with An Array


40/164


{{store.products[0].name}}

${{store.products[0].price}}

{{store.products[0].description}}

Add to Cart

. . .



41/164


. . .

Displaying the first is easy enough...

{{store.products[0].name}}

${{store.products[0].price}}

{{store.products[0].description}}



42/164


That works...



43/164


What We Have Learned So Far


44/164

What We Have Learned So Far

Directives HTML annotations that trigger Javascript

Modules Where our application components live

Controllers Where we add application behavior

Expressions How values get displayed within the pa


45/164

Challenges


46/164


47/164


48/164

Shaping Up with Angular.JS

Level 2: Filters, Directives, and Cleaner Code

Directives We Know & Love


49/164

ng-app attach the Application Module to the page

ect es e o & o e

ng-controller attach a Controller function to the page

ng-show / ng-hide display a section based on an Expressio

ng-repeat repeat a section for each item in an Array

Hello, {{name}}!

{{product.name}}

Our Current Code


50/164


51/164

Pipe - send the output intoFormat this

Notice it gives the dollar sign Specifies number of decimals

{{product.price| currency }


52/164

{{ data | filter:options }}

g

*Our Recipe

{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}

date

12/27/20

{{'octagon gem' | uppercase}}

uppercase & lowercase

OCTAGON

{{'My Description' | limitTo:8}}

limitTo

My Descr


53/164

vargems = [

{name: 'Dodecahedron Gem',

price: 2.95, description: '. . .',

images: [

{

full: 'dodecahedron-01-full.jpg',

thumb: 'dodecahedron-01-thumb.jpg'

},

{

full: "dodecahedron-02-full.jpg",

. . .

g g y y

Our New ArrayImage

To display the first image in a product: {{product.images[0].f

Using ng-src for Images


54/164


55/164

g


56/164

Challenges

More With Directives


57/164

How can I make my amore interactive?

A Simple Set of Tabs


58/164


59/164

Assigning a value to tab.For now just print this value to the screen.


60/164

g

Whoa, its dynamic and stuff...


61/164

When ng-clickchanges 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 cha

Lets add the tab content panels


62/164

tabs are up here.... . .

Lets add the tab content panels


63/164

Now when a tab is selected it will show the appropriate pa

>

>

Description

{{product.description}}

Specifications

None yet

Reviews

None yet

ng-show="tab === 1"

ng-show="tab === 2"

ng-show="tab === 3"


64/164

initial va

Setting the Initial Value


65/164

ng-initallows us to evaluate an expression in the curre

Description

Specifications

Reviews

. . .

Now with the Initial Tab


66/164

Setting the Active Class


67/164

We need to set the classto activeif current tabis se

ng-init="tab = 1">


68/164

Name of the class to set.

Expression to evIf true, set classotherwise nothing

ng-init="tab = 1">


69/164

Feels dirty, doesnt it?


70/164

All our applications logic is inside our HTML.

How might logic into a

tab === 1

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

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

ng-init="tab = 1">

Creating our Panel Controller


71/164

ng-init="tab = 1"

>

Moving our tab initializer


72/164

ng-controller="PanelController as panel">

Creating our selectTab function


73/164

}">

}">

tab === 1

tab === 2

tab === 3

this.tab =setTab;

};

function(setTabthis.selectTab=

Creating our isSelected function


74/164

}">

}">


75/164


76/164

Challenges


77/164


78/164


79/164

Shaping Up with Angular

Level 3: Forms, Models, and Validations

More Directives: Forms & Models


80/164

How can I let my users ad

Adding reviews to our products


81/164

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

}

. . .

Looping Over Reviews in our Tab


82/164


83/164

Nothing new here, but how do we start to implement forms

Writing out our Review Form


84/164

Reviews

...


85/164

Stars: {{review.stars}}

{{review.body}}by: {{review.author}}

How do we bind object to the form

1 star

2 stars

. . .

by:

Introducing ng-model&,


86/164

ng-model="review.stars"

ng-model="review.body"

ng-model="review.author"

1 star

2 stars

. . .

by:


{{review.body}}by: {{review.author}}

ng-model bin

form elemento the proper

Live Preview In Action


87/164

But how do we actually add the new review?

Two More Binding Examples

With a Checkbox


88/164

I agree to t

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?


89/164

Challenges

We need to Initialize the Review


90/164

We could do ng-in

were better offcreating a controll

by:


{{review.body}}

by: {{review.author}}

1 star

2 stars

. . .

Creating the Review Controller&

ll ( i ll f i (){


91/164

Now we need to upda

all the Expressions this controller alias.

ng-controller="ReviewController as review


92/164

ng-controller="ReviewController as review

reviewCtrl.

reviewCtrl.

reviewCtrl.

reviewCtrl.

reviewCtrl.


93/164

ng-submit="reviewCtrl.addReview(product)

We need

this funct

ng-submitallows us to call a function when the form is sub

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

this.review ={};

});

reviewCtrl.

reviewCtrl.

reviewCtrl.

ng-controller="ReviewController as revie


94/164

reviewCtrl.

ng-controller="ReviewController as revie

reviewCtrl.

reviewCtrl.


Push reviewontproducts review


this.review ={};

});

this.addReview =function(product) {

product.reviews.push(this.review);

};


95/164

gbut the form s

all previous va

Resetting the Form on Submit



96/164


97/164

Were not savreviews anyw


98/164

Challenges

Turns out Angular has some great client side validations w

What about validations?


99/164

Turns out Angular has some great client side validations w

use with our directives.

Our Old Form Code


100/164


101/164

required

no

required

Mark Requir

Print ForreviewForm is {{reviewForm.$valid}}


102/164

formwhen


103/164

g


We only want this method to be calledif reviewForm.$valid is true.


104/164

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

If valid is false, then addReviewisnever called.

Doesnt Submit an Invalid Form

H i ht i hi t


105/164

How might we give a hint why their form is invalid?

The Input Classes


106/164

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 typinshowing if a field is valid or invalid. ng-valid ng-invalid

The classes


107/164

.ng-invalid.ng-dirty{

border-color:#FA787E;

}

.ng-valid.ng-dirty {

border-color:#78FA89;

}

Red border for invalid

Green border for valid

Now with red and green borders!


108/164

Web forms usually have rules around valid input:

HTML5-based type validations


109/164

Angular JS has built-in validations for common input ty

min=1

Can als

& max


110/164


111/164


112/164

Shaping Up with Angular JSLevel 4: Creating a Directive with an

Associated Controller

Decluttering our Code


113/164

Were going to have multiple pages that want to reuse th

snippet.

How do we eliminate this duplication?

g p g p p p

{{product.name}}

${{product.price}}

. . .

Using ng-includefor Templates


114/164

prod

Awesome Multi-touch Keyboa

$250.00

ge

ng-include is expecting a variable with the name of the fil

To pass the name directly as a string, use single quotes ('

l class l st g oup te g epeat p oduct sto e.p od

{{product.name}}

${{product.price}}


115/164

Web Server

HTML Java

Web Browser

URL Request to server


116/164


HTML Returned

Fetches ng-included file HTML

Browser loadAngular ap

Creating our First Custom Directive

Using ng-include...


117/164

Custom Directive

Our old code and our custom Directive will do the same

with some additional code.

Why write a Directive?

Why Directives?

Directives allow you to write HTML that expresses the behof your application


118/164

of your application.

Canyoute

ll

thisdoe

Template-expanding Directivesare the simplest:

define a custom tag or attribute that is expanded or re

Writing Custom Directives


119/164

define a custom tag or attribute that is expanded or re

can include Controller logic, if needed

Directives can also be used for:

Expressing complex UI

Calling events and registering event handlers

Reusing common components

How to Build Custom Directives


120/164

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

};

});

A configuration object defining how your directive will

How to Build Custom Directives

lC i J S i td h i HTML t l t t


121/164

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

};

});

{{product.name}}

$250.00

Type of Directive(E for Element)

Url of a template restrict:'E',

templateUrl: 'product-title.html'

camelCasein JavaScriptdashin HTML translates to ...


122/164

Attribute vs Element Directives

Element Directive


123/164

Attribute Directive

some browsers dont like self-

Use Element Directives for UI widgets and Attribute Direcmixin behaviors... like a tooltip.

Notice were not using a self-closing tag

p /p


124/164

{{product.name}} $250.00

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

return{

};

});

Though normally attributes would be for mixin behaviors

restrict: 'A',

templateUrl:'product-title.html'Type of Directive(A for Attribute)

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

youll be able to understand the functionality just by lookin

Directives allow you to write better HTML


125/164

youll be able to understand the functionality just by lookin

the HTML?

When you're writing an Angular JS application, you should

able to understand the behavior and intent from just the H

No, right?

And youre likely using custom directives to write expre

HTML.


126/164

Shaping Up with Angular JS

Creating Our Own Directives

Reviewing our DirectiveTemplate-Expanding Directives


127/164

{{product.name}}

${{product.price}}index.html

An Attribute Directive

An Element Directive

What if we needa Controller?

ng-controller="PanelController as panels"

>


128/164

inde

. . .

. . .


129/164

produc

>


130/164

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

return{

restrict: 'E',

templateUrl:'product-panels.html'

};

});

What about the Controller?


. . .


131/164


return{

restrict: 'E',


};

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

. . .

});

First we need to move the functionality inside the direc

Moving the Controller Inside


. . .


132/164


return{

restrict: 'E',


};

});

,

Next, move the alias inside

function(){

. . .

controller:

}

Need to Specify the Alias

. . .


133/164

Now it works, using panelsas our Controller Alia

controllerAs: 'panels'

};

});


return{

restrict: 'E',


};

});

,

,

function(){

. . .

controller:

}


134/164


135/164

Challenges


136/164


137/164


138/164

Shaping Up with Angular JSLevel 5: Dependencies and Services

(function(){

varapp=angular.module('store', [

Starting to get a bit cluttered?

app controller('StoreController' function(){ });

]);


139/164

Can wethes

. . .

})();

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

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

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

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

(function(){


Extract into a new file ... products.js


]);


140/164

. . .

})();

app.controller( StoreController ,function(){ . . . });

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

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

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

(function(){


Make a newModule


]);

Define a new for Produc


141/164

. . .

})();


(function(){

varapp =angular.module('store

})();

-products',

Mod

Different closure

means differentappvariable.

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

app.directive('productGallery',function()

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

(function(){


Add it to the dependencies ...

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

]);'store-products'

storedestore-p


142/164

. . .

})();


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

app.directive('productGallery',function()

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

(function(){

varapp =angular.module('store

})();

-products',

Modu

. . .

Well also need to include the file


143/164

. . .


144/164

Best to split Modules around functionality:

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

d j ll h f i li f d d

How should I organize my application Mod


145/164

products.js all the functionality for products and


146/164

Challenges

Does this feel strange?

(function(){

varapp=angular.module('store', ['store-products']);

app controller('StoreController' function(){


147/164

What is all this dat

doing here?Where can we put it?

Shouldn't we fetch this from an API?

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

this.products =[ {name:'. . .',price:1.99, . . . },

{name:'. . .',price:1.99, . . . },

{name:'. . .',price:1.99, . . . },

. . .

});

})();

. . .

];

How do we get that data?

(function(){

varapp=angular.module('store', ['store-products']);

app controller('StoreController' function(){


148/164

How do we products fr

http://api.example.com/products.json

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

this.products =???; . . .

});

})();

{name:'. . .',price:1.99,

{name:'. . .',price:1.99,

{name:'. . .',price:1.99,

[

. . .

]

Services give your Controller additional functionality, lik

Fetching JSON data from a web service with $http

Logging messages to the JavaScript console with $log

We need a Service!


149/164

Logging messages to the JavaScript console with $log

Filtering an array with $filter

All buista

The $httpService is how we make an async request to a se

By using $httpas a function with an options object:

Introducing the$httpService!

$http({ method: 'GET' url: '/products json' });


150/164

Sohowdoweuseit?

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

If we tell $httpto fetch JSON, the result will be automaticalldecoded into JavaScript objects and arrays

Use this funky array syntax:

app.controller('SomeController',['$http',function($http)

How does a Controller use a Service like $


151/164

} ]);

Service nameService name as an argument

Depe

app.controller('SomeController', [ '$http','$log',function($htt

} ]); If you needed more th

When Angular is Loaded Services are Regis

app.controller('SomeController', [ '$http','$log',function($htt

} ]);


152/164

SomeController

Injector

app.controller('SomeController', [ '$http','$log',function($ht

} ]);

A Controller is Initialized


153/164

SomeController

Injectorand $log,too ...I need $http...

Psst... When I run...

app.controller('SomeController', [ '$http','$log',function($ht

} ]);

Then When the Controller runs ...


154/164

SomeController

InjectorHere ya go!DependencyInjection!

(function(){

varapp=angular.module('store', [ 'store-products']);

app.controller('StoreController',

So where were we?

){function(


155/164

this.products=???;);}

})();

(function(){



Time for your injection!

function(['$http', $htt


156/164

this.products=???;);}

})();

StoreControllerneedsthe $httpService...

...sogets as an a

Now what?

]

(function(){



Lets use our Service!



157/164

this.products=???;

);}})();

$http.get('/products.json')

Fetch the contents ofproducts.json...

]

(function(){



Our Service will Return Data



158/164

this.products=???;

);}

})();

$http.get('/products.json').success(function(data){

???

});

=data;

$httpreturns a Pro

success()gets theWhat do we assigndatato, though...?

]

(function(){



Storing the Data for use in our Page



159/164

);}

})();


});

=data;

varstore =this;

store.products

We need to store what thisis ...... and now we have soto put our dat

But the page might look funny until the data loads.

]

(function(){



Initialize Products to be a Blank Array



160/164

);}

})();


});

=data;

varstore =this;

store.products

store.products =[];

We need to initialize productsarray, since the page will render

data returns from our get r]


161/164

$http.post('/path/to/resource.json', { param:'value' });

Additional $http functionalityIn addition to get()requests, $httpcan post(), put(), d


162/164

$http({method:'PATCH', url:'/path/to/resource.json'});

$http({method:'TRACE', url:'/path/to/resource.json' });

$http.delete('/path/to/resource.json');

$http({method:'OPTIONS', url: '/path/to/resource.json' })

...or any other HTTP method by using a configobject:


163/164

Challenges


164/164

Documents

angular js level 01-05