O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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 - Te...
Why Angular?
If you’re using JavaScript to create a dynamic website,
Angular is a good choice.
• Angular helps you organiz...
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
Response with Webpage & Assets...
Screencast: Request-Response Application
NOTE: Note how responsive the page is
A “responsive” website using Angular
Web Server
Response with Webpage & Assets
Web Browser
URL Request to server
Response with JSON Data
User clicks on link, n...
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.jsindex.html
How do we tell our HTML when to trig...
<!DOCTYPE html>

<html>

<body

. . .
</body>

</html>
app.js
function Store

alert('Welcome, Gregg!');

}

A Directive is...
The Flatlanders Store!
Screencast: Flatlanders Store
Fully Functional
Download AngularJS http://angularjs.org/
We’ll need angular.min.js
Downloading the libraries
Download Twitter Bootstrap ht...
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

</head>

<body>

<scr...
Modules
• Where we write pieces of our Angular application.
• Makes our code more maintainable, testable, and readable.
• ...
Creating Our First Module
Dependencies
Other libraries we might need. 

We have none... for now…
Application
Name
AngularJ...
Including Our Module
var app = angular.module('store', [ ]); app.js
index.html
<!DOCTYPE html>

<html>

<head>

<link rel=...
Including Our Module
var app = angular.module('store', [ ]); app.js
<!DOCTYPE html>

<html ng-app="store">

<head>

<link ...
Allow you to insert dynamic values into your HTML.
Expressions
Numerical Operations
evaluates to
String Operations
evaluat...
Including Our Module
var app = angular.module('store', [ ]); app.js
<!DOCTYPE html>

<html ng-app="store">

<head>

<link ...
Challenges
Working With Data
...just a simple
object we want to
print to the page.
var gem = {

name: 'Dodecahedron',

price: 2.95,

...
Controllers
app.js
Notice that controller is attached to (inside) our app.
Controllers are where we define our app’s behav...
Storing Data Inside the Controller
app.js
Now how do we
print out this
data inside our
webpage?
this.product = gem;
var ge...
<!DOCTYPE html>

<html ng-app="store">

<head>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

</head...
<body>

<div>

<h1> Product Name </h1>

<h2> $Product Price </h2>

<p> Product Description </p>

</div>

<script type="tex...
<body>

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

<h1> Product Name </h1>

<h2> $Product Price </h2>

<p> Product De...
<body>

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

!
!
</div>

<script type="text/javascript" src="angular.min.js"></...
Understanding Scope
Would never print a
value!
The scope of
the Controller
is only inside
here...
}{{store.product.name}}
...
Challenges
</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="app.js"></scrip...
var gem = {

name: 'Dodecahedron',

price: 2.95,

description: '. . .',
}.
canPurchase: false
</div>

<script type="text/j...
var gem = {

name: 'Dodecahedron',

price: 2.95,

description: '. . .',
}.
canPurchase: false
</div>

<script type="text/j...
</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="app.js"></scrip...
</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="app.js"></scrip...
</div>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="app.js"></scrip...
Multiple Products
app.js
var gem = 

name: "Dodecahedron",

price: 2.95,

description: ". . .",

canPurchase: true,

},

{...
Multiple Products
app.js
var gems = [



name: "Dodecahedron",

price: 2.95,

description: ". . .",

canPurchase: true,

}...
Working with An Array
index.html
<body ng-controller="StoreController as store">

<div>

<h1> {{store.products[0].name}} <...
index.html
Working with An Array
. . .

</body>
Displaying the first product
is easy enough...
<body ng-controller="StoreC...
Working with An Array
index.html
<body ng-controller="StoreController as store">

<div

<h1> {{store.products[0].name}} </...
Working with An Array
index.html
<body ng-controller="StoreController as store">

<div

<h1> {{product.name}} </h1>

<h2> ...
What We Have Learned So Far
Directives – HTML annotations that trigger Javascript behaviors
Modules – Where our applicatio...
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 ...
Our Current Code
<body ng-controller="StoreController as store">

<ul class="list-group">

<li class="list-group-item" ng-...
Our First Filter
Pipe - “send the output into”
Format this into currency
Notice it gives the dollar sign (localized)
Speci...
{{ data | filter:options }}
Formatting with Filters
*Our Recipe
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
date
12/27...
var gems = [

{ name: 'Dodecahedron Gem',
price: 2.95,

description: '. . .',

images: [

{
full: 'dodecahedron-01-full.jp...
<body ng-controller="StoreController as store">

<ul class="list-group">

<li class="list-group-item" ng-repeat="product i...
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<...
Introducing a new Directive!
index.html
Assigning a value to tab.
For now just print this value to the screen.
<section>

...
Introducing a new Directive!
When ng-click changes the value of tab …
… the {{tab}} expression automatically gets updated!
!
Expressions define a 2-way...
<div class="panel"
<div class="panel"
Let’s add the tab content panels
How do we make the tabs trigger the panel to show?
...
Let’s add the tab content panels
Now when a tab is selected it will show the appropriate panel!
<div class="panel" >
>
>
<...
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="t...
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 =...
The ng-class directive
Name of the class to set.
Expression to evaluate
If true, set class to “active”,
otherwise nothing....
Feels dirty, doesn’t it?
All our application’s logic is inside our HTML.
How might we pull this
logic into a Controller?
i...
Creating our Panel Controller
index.html
app.js
ng-init="tab = 1"<section
<ul class="nav nav-pills">
<li >
<a href >Descri...
Moving our tab initializer
index.html
app.js
<section
<ul class="nav nav-pills">
<li >
<a href >Description</a>
<li
</li>
...
Creating our selectTab function
index.html
app.js
<section
<ul class="nav nav-pills">
ng-controller="PanelController as pa...
Creating our isSelected function
index.html
app.js
<section
<ul class="nav nav-pills">
ng-controller="PanelController as p...
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...
<li class="list-group-item" ng-repeat="product in store.products">

. . .

<div class="panel" ng-show="panel.isSelected(3)...
We’re 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...
With Live Preview,.
index.html
<blockquote>
<b>Stars: {{review.stars}}</b>

{{review.body}} 

<cite>by: {{review.author}}<...
Introducing ng-model&,
index.html
ng-model="review.stars"
ng-model="review.body"
ng-model="review.author"
<select >
<optio...
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 Radi...
Challenges
We need to Initialize the Review
index.html
We could do ng-init, but
we’re better off
creating a controller.
<label>by:</l...
Creating the Review Controller&
app.js
Now we need to update
all the Expressions to use
this controller alias.
index.html
...
Using the reviewCtrl.review
app.js
index.html
ng-controller="ReviewController as reviewCtrl"
reviewCtrl.
reviewCtrl.
revie...
Using ng-submit to make the Form Work^
app.js
index.html
ng-submit="reviewCtrl.addReview(product)"
We need to define
this ...
reviewCtrl.
app.js
index.html
ng-controller="ReviewController as reviewCtrl"
reviewCtrl.
reviewCtrl.
ng-submit="reviewCtrl...
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)">
<blockqu...
This Time the Form Resets However, if we refresh,
the reviews get reset!

We’re 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
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewCtrl....
Now with validation.
index.html
required
novalidate
required
required
Turn Off Default HTML Validation
Mark Required Field...
With validations
We don’t want the
form to submit
when it’s invalid.
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewCtrl.addReview(product)" novalidat...
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addRevie...
Doesn’t 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="ema...
.ng-invalid.ng-dirty {

border-color: #FA787E;

}
!
.ng-valid.ng-dirty {

border-color: #78FA89;

}
The classes
index.html...
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...
Shaping Up with Angular JS
Level 4: Creating a Directive with an
Associated Controller
Decluttering our Code
index.html
We’re going to have multiple pages that want to reuse this HTML
snippet.
How do we elimin...
Using ng-include for Templates
index.html
product-title.html
<h3 ng-include="'product-title.html'" class="ng-scope">

<spa...
Web Server
HTML JavaScript
Response with Webpage & Assets
Web Browser
URL Request to server
HTML Returned
Fetches ng-inclu...
<h3 ng-include="'product-title.html'"></h3>
Creating our First Custom Directive
index.html
Custom Directive
Using ng-inclu...
Why Directives?
Directives allow you to write HTML that expresses the behavior
of your application.
Can you tell what
this...
Template-expanding Directives are the simplest:
• define a custom tag or attribute that is expanded or replaced
• can incl...
app.directive('productTitle', function(){

return {
!
};

});
How to Build Custom Directives
app.js
<product-title></produ...
app.directive('productTitle', function(){

return {
!
!
};

});
How to Build Custom Directives
app.js
<product-title></pro...
index.html
Attribute vs Element Directives
Element Directive
Attribute Directive
…some browsers don’t like self-closing ta...
index.html
Defining an Attribute Directive
app.js
<h3>

{{product.name}}

<em class="pull-right">$250.00</em>

</h3>
index...
When you think of a dynamic web application, do you think
you’ll be able to understand the functionality just by looking a...
Shaping Up with Angular JS
Creating Our Own Directives
<h3> 

{{product.name}} 

<em class="pull-right">${{product.price}}</em>
</h3>
Reviewing our Directive
index.html
Template...
What if we need a Controller?
index.html
}Directive?
ng-controller="PanelController as panels"
<ul class="nav nav-pills"> ...
First, extract the template...
product-panels.html
index.html
><section
<ul class="nav nav-pills"> . . . </ul>

<div class...
Now write the Directive ...
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-p...
What about the Controller?
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-pa...
Moving the Controller Inside
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-...
Need to Specify the Alias
app.js
index.html
Now it works, using panels as our Controller Alias.
. . .
</product-panels>
<p...
Challenges
Shaping Up with Angular JS
Level 5: Dependencies and Services
(function(){

var app = angular.module('store', [
Starting to get a bit cluttered?
app.js
Can we refactor
these out?
. . ....
(function(){

var app = angular.module('store', [
Extract into a new file ... products.js
app.js
. . .

})();
app.controll...
(function(){

var app = angular.module('store', [
Make a new Module
app.js
. . .

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

var app = angular.module('store', [
Add it to the dependencies ...
app.js
. . .

})();
app.controller('Store...
<!DOCTYPE html>

<html ng-app="store">

<head> . . . </head>

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

. . .

<scr...
Best to split Modules around functionality:
• app.js – top-level module attached via ng-app
• products.js – all the functi...
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?...
How do we get that data?
app.js
How do we fetch our
products from an API?
http://api.example.com/products.json
(function()...
Services give your Controller additional functionality, like ...
• Fetching JSON data from a web service with $http
• Logg...
The $http Service is how we make an async request to a server ...
• By using $http as a function with an options object:
I...
Use this funky array syntax:
app.controller('SomeController', [ '$http', function($http){



} ]);
How does a Controller u...
When Angular is Loaded Services are Registered
SomeController $http
Injector
$log
app.controller('SomeController', [ '$htt...
app.controller('SomeController', [ '$http', '$log', function($http, $log){



} ]);
A Controller is Initialized
SomeContro...
app.controller('SomeController', [ '$http', '$log', function($http, $log){



} ]);
Then When the Controller runs ...
Some...
(function(){

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



app.controller('StoreController',
So where were ...
(function(){

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



app.controller('StoreController',
Time for your ...
(function(){

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



app.controller('StoreController',
Let’s use our ...
(function(){

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



app.controller('StoreController',
Our Service wi...
(function(){

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



app.controller('StoreController',
Storing the Da...
(function(){

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



app.controller('StoreController',
Initialize Pro...
$http.post('/path/to/resource.json', { param: 'value' });
Additional $http functionality
$http({ method: 'PATCH', url: '/p...
Challenges
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Próximos SlideShares
Carregando em…5
×

Course CodeSchool - Shaping up with Angular.js

3.334 visualizações

Publicada em

Shaping up with Angular.js

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Course CodeSchool - Shaping up with Angular.js

  1. 1. Shaping Up with Angular Level 1: Getting Started
  2. 2. 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
  3. 3. 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 • Angular is easy to test
  4. 4. Traditional Page-Refresh Screencast: Request-Response Application NOTE: Time between user 
 interaction and response.
  5. 5. 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 entire webpage.
  6. 6. Screencast: Request-Response Application NOTE: Note how responsive the page is A “responsive” website using Angular
  7. 7. 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.
  8. 8. Modern API-Driven Application HTML Browser App Data Source Mobile App Developers Server API
  9. 9. A client-side JavaScript Framework for adding interactivity to HTML. app.jsindex.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?
  10. 10. <!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 callindex.html Controller(){ ng-controller="StoreController">
  11. 11. The Flatlanders Store! Screencast: Flatlanders Store Fully Functional
  12. 12. 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
  13. 13. <!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
  14. 14. 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...
  15. 15. Creating Our First Module Dependencies Other libraries we might need. 
 We have none... for now… Application Name AngularJS var app = angular.module('store', [ ]);
  16. 16. Including Our Module var app = angular.module('store', [ ]); app.js index.html <!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> <script type="text/javascript" src="app.js"></script> </body>
 </html>
  17. 17. Including Our Module var app = angular.module('store', [ ]); app.js <!DOCTYPE html>
 <html ng-app="store">
 <head>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 </head>
 <body>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body>
 </html> Run this module when the document loads. index.html
  18. 18. 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>

  19. 19. Including Our Module var app = angular.module('store', [ ]); app.js <!DOCTYPE html>
 <html ng-app="store">
 <head>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 </head>
 <body>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 <p>{{"hello" + " you"}}</p> </body>
 </html> index.html
  20. 20. Challenges
  21. 21. Working With Data ...just a simple object we want to print to the page. var gem = {
 name: 'Dodecahedron',
 price: 2.95,
 description: '. . .',
 }.
  22. 22. 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(){
 
 });
  23. 23. 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(){
 
 });
  24. 24. <!DOCTYPE html>
 <html ng-app="store">
 <head>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 </head>
 ! ! ! ! ! ! ! ! </html>
 <body>
 <div>
 <h1> Product Name </h1>
 <h2> $Product Price </h2>
 <p> Product Description </p>
 </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> Our Current HTML Let’s load our data into this part of the page. } index.html
  25. 25. <body>
 <div>
 <h1> Product Name </h1>
 <h2> $Product Price </h2>
 <p> Product Description </p>
 </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> (function(){
 var app = angular.module('store', [ ]);
 
 app.controller('StoreController', function(){
 this.product = gem; }); . . . })(); app.js index.html Attaching the Controller
  26. 26. <body>
 <div ng-controller="StoreController as store">
 <h1> Product Name </h1>
 <h2> $Product Price </h2>
 <p> Product Description </p>
 </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> Attaching the Controller (function(){
 var app = angular.module('store', [ ]);
 
 app.controller('StoreController', function(){
 this.product = gem; }); . . . })(); app.js index.html Controller name AliasDirective
  27. 27. <body>
 <div ng-controller="StoreController as store">
 ! ! </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> index.html Displaying Our First Product (function(){
 var app = angular.module('store', [ ]);
 
 app.controller('StoreController', function(){
 this.product = gem; }); . . . })(); app.js <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p>
  28. 28. 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 ng-controller="StoreController as store">
 ! ! </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body>
  29. 29. Challenges
  30. 30. </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </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: '. . .', }.
  31. 31. var gem = {
 name: 'Dodecahedron',
 price: 2.95,
 description: '. . .', }. canPurchase: false </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> Adding A Button index.html <button How can we only show this button... ...when this is true? Directives tothe rescue! <body ng-controller="StoreController as store">
 <div>
 <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p> > Add to Cart </button>
  32. 32. var gem = {
 name: 'Dodecahedron',
 price: 2.95,
 description: '. . .', }. canPurchase: false </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> NgShow Directive index.html <button <body ng-controller="StoreController as store">
 <div>
 <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p> ng-show="store.product.canPurchase"> Add to Cart </button> Will only show the element if the value of the Expression is true.
  33. 33. </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> index.html <button <body ng-controller="StoreController as store">
 <div
 <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p> ng-show="store.product.canPurchase"> Add to Cart </button> 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 >
  34. 34. </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> index.html <button <body ng-controller="StoreController as store">
 <div
 <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p> ng-show="store.product.canPurchase"> Add to Cart </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">
  35. 35. </div>
 <script type="text/javascript" src="angular.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body> index.html <button <body ng-controller="StoreController as store">
 <div
 <h1> {{store.product.name}} </h1>
 <h2> ${{store.product.price}} </h2>
 <p> {{store.product.description}} </p> ng-show="store.product.canPurchase"> Add to Cart </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">
  36. 36. Multiple Products app.js var gem = 
 name: "Dodecahedron",
 price: 2.95,
 description: ". . .",
 canPurchase: true,
 },
 { app.controller('StoreController', function(){
 this.product = gem
 });
 ;
  37. 37. 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
 });
 ; So we have multiple products...
  38. 38. 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>
 <button ng-show="store.products[0].canPurchase">
 Add to Cart</button>
 </div>
 . . .
 </body>
  39. 39. index.html Working with An Array . . .
 </body> Displaying the first product is easy enough... <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>
 <button ng-show="
 Add to Cart</button>
 </div> store.products[0].canPurchase">
  40. 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>
 <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>
 <button ng-show="store.products[1].canPurchase">
 Add to Cart</button>
 </div> Why repeat yourself? Why repeat yourself? Why... You get it. > store.products[0].canPurchase"> That works...
  41. 41. Working with An Array index.html <body ng-controller="StoreController as store">
 <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" product > Repeat this section for each product. }.canPurchase">
  42. 42. 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
  43. 43. Challenges
  44. 44. Shaping Up with Angular.JS Level 2: Filters, Directives, and Cleaner Code
  45. 45. 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 <html ng-app="store"> <body ng-controller="StoreController as store"> <h1 ng-show="name"> Hello, {{name}}! </h1> <li ng-repeat="product in store.products"> {{product.name}} </li>
  46. 46. Our Current Code <body ng-controller="StoreController as store">
 <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> There’s a better way to print out prices. $2
  47. 47. 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>}} <body ng-controller="StoreController as store">
 <ul class="list-group">
 <li class="list-group-item" ng-repeat="product in store.products">
 <h3> 
 {{product.name}} </h3>
 </li>
 </ul>
 </body> $2.00
  48. 48. {{ 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"> * *
  49. 49. 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: {{product.images[0].full}} app.js
  50. 50. <body ng-controller="StoreController as store">
 <ul class="list-group">
 <li class="list-group-item" ng-repeat="product in store.products">
 <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}}"/>
  51. 51. Our Products with Images
  52. 52. Challenges
  53. 53. More With Directives How can I make my application more interactive?
  54. 54. 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>
  55. 55. Introducing a new Directive! index.html Assigning a value to tab. For now just print this value to the screen. <section>
 <ul class="nav nav-pills”> <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>
  56. 56. Introducing a new Directive!
  57. 57. 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, it’s dynamic and stuff...
  58. 58. <div class="panel" <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>
 <blockquote>None yet</blockquote>
 </div> <h4>Reviews</h4>
 <blockquote>None yet</blockquote>
 </div> > > > tabs are up here... . . .
  59. 59. Let’s add the tab content panels Now when a tab is selected it will show the appropriate panel! <div class="panel" > > > <h4>Description</h4>
 <p>{{product.description}}</p>
 </div> <h4>Specifications</h4>
 <blockquote>None yet</blockquote>
 </div> <h4>Reviews</h4>
 <blockquote>None yet</blockquote>
 </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
  60. 60. But how do we set an initial value for a tab?
  61. 61. 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> . . .
  62. 62. Now with the Initial Tab
  63. 63. Setting the Active Class We need to set the class to active if current tab is selected ... index.html </ul> ng-init="tab = 1"> <ul class="nav nav-pills”> >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>
  64. 64. 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 <ul class="nav nav-pills”> <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
  65. 65. 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 <ul class="nav nav-pills"> <li > <a href >Description</a> <li </li> > <a href >Specifications</a> <li </li> > <a href >Reviews</a> </li> </ul> ng-click=" "tab = 1 "tab = 2ng-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">
  66. 66. Creating our Panel Controller index.html app.js ng-init="tab = 1"<section <ul class="nav nav-pills"> <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 = 2ng-click=" ng-click=" "tab = 3 <li ng-class="{ active: }">tab === 1 <li ng-class="{ active: }">tab === 2 <li ng-class="{ active: }">tab === 3 <div class="panel" ng-show=" <h4>Description </h4>
 <p>{{product.description}}</p>
 </div> … tab === 1"> >
  67. 67. Moving our tab initializer index.html app.js <section <ul class="nav nav-pills"> <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 <li ng-class="{ active: }">tab === 1 <li ng-class="{ active: }">tab === 2 <li ng-class="{ active: }">tab === 3 <div class="panel" ng-show=" <h4>Description </h4>
 <p>{{product.description}}</p>
 </div> … tab === 1"> ng-controller="PanelController as panel" >
  68. 68. Creating our selectTab function index.html app.js <section <ul class="nav nav-pills"> ng-controller="PanelController as panel"> <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> " app.controller("PanelController", function(){ }); this.tab = 1; ng-class="{ active: ng-class="{ active: ng-class="{ active: }"> }"> }"> tab === 1 tab === 2 tab === 3 <div class="panel" ng-show=" <h4>Description </h4>
 <p>{{product.description}}</p>
 </div> … tab === 1"> this.tab = setTab; }; function(setTab) {this.selectTab =
  69. 69. Creating our isSelected function index.html app.js <section <ul class="nav nav-pills"> ng-controller="PanelController as panel"> <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=" "> <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 =
  70. 70. Challenges
  71. 71. Shaping Up with Angular Level 3: Forms, Models, and Validations
  72. 72. More Directives: Forms & Models How can I let my users add content?
  73. 73. 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"
 }
 . . .
  74. 74. <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>
 {{review.body}} 
 <cite>by: {{review.author}}</cite> 
 </blockquote>
 </div>
 Looping Over Reviews in our Tab index.html
  75. 75. We’re displaying Reviews! Nothing new here, but how do we start to implement forms?
  76. 76. <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> >
  77. 77. With Live Preview,. index.html <blockquote> <b>Stars: {{review.stars}}</b>
 {{review.body}} 
 <cite>by: {{review.author}}</cite> 
 </blockquote> How do we bind this review object to the form? <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> <select> <form name="reviewForm">
  78. 78. Introducing ng-model&, index.html ng-model="review.stars" ng-model="review.body" ng-model="review.author" <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> <form name="reviewForm"> <blockquote> <b>Stars: {{review.stars}}</b>
 {{review.body}} 
 <cite>by: {{review.author}}</cite> 
 </blockquote> ng-model binds the form element value to the property
  79. 79. Live Preview In Action But how do we actually add the new review?
  80. 80. <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

  81. 81. Challenges
  82. 82. We need to Initialize the Review index.html We could do ng-init, but we’re better off creating a controller. <label>by:</label> 
 <input ng-model="review.author" type="email" />
 <input type="submit" value="Submit" />
 </form> <form name="reviewForm"> <b>Stars: {{review.stars}}</b> {{review.body}} <cite>by: {{review.author}}</cite> </blockquote> <blockquote> <select ng-model="review.stars"> <option value="1">1 star</option>
 <option value="2">2 stars</option>
 . . .
 </select> <textarea ng-model="review.body"></textarea>
  83. 83. 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" > <b>Stars: {{review.stars}}</b> {{review.body}} <cite>by: {{review.author}}</cite> </blockquote> <select ng-model="review.stars"> <option value="1">1 star</option>
 <option value="2">2 stars</option>
 . . .
 </select> <textarea ng-model="review.body"></textarea> <blockquote> app.controller("ReviewController", function(){
 this.review = {}; });
  84. 84. 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"> <option value="1">1 star</option>
 <option value="2">2 stars</option>
 . . .
 </select> <textarea ng-model=" review.body"></textarea> app.controller("ReviewController", function(){
 this.review = {}; });
  85. 85. 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. app.controller("ReviewController", function(){
 this.review = {}; }); reviewCtrl. reviewCtrl. reviewCtrl. ng-controller="ReviewController as reviewCtrl"<form name="reviewForm" <blockquote> <b>Stars: {{ review.stars}}</b> {{ review.body}} <cite>by: {{ review.author}}</cite> </blockquote> >
  86. 86. reviewCtrl. app.js index.html ng-controller="ReviewController as reviewCtrl" reviewCtrl. reviewCtrl. ng-submit="reviewCtrl.addReview(product)" Push review onto this product’s reviews array. app.controller("ReviewController", function(){
 this.review = {}; }); this.addReview = function(product) { product.reviews.push(this.review); }; <form name="reviewForm" <blockquote> <b>Stars: {{ review.stars}}</b> {{ review.body}} <cite>by: {{ review.author}}</cite> </blockquote> Using ng-submit to make the Form Work^
  87. 87. Now with Reviews! Review gets added, but the form still has all previous values!
  88. 88. <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. app.controller("ReviewController", function(){
 this.review = {}; }); this.addReview = function(product) { product.reviews.push(this.review); }; this.review = {};
  89. 89. This Time the Form Resets However, if we refresh, the reviews get reset!
 We’re not saving the reviews anywhere yet...
  90. 90. Challenges
  91. 91. Turns out Angular has some great client side validations we can use with our directives. What about validations?
  92. 92. Our Old Form Code index.html <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> <select ng-model="reviewCtrl.review.stars" <option value="1">1 star</option>
 ...
 </select> <textarea name="body" ng-model="reviewCtrl.review.body"></textarea> <label>by:</label> <input name="author" ng-model="reviewCtrl.review.author" type="email" /> <input type="submit" value="Submit" />
 </form> >
  93. 93. 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> <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" > <select ng-model="reviewCtrl.review.stars" <option value="1">1 star</option>
 ...
 </select> > <textarea name="body" ng-model="reviewCtrl.review.body" ></textarea> <label>by:</label> <input name="author" ng-model="reviewCtrl.review.author" type="email" /> <input type="submit" value="Submit" />
 </form>
  94. 94. With validations We don’t want the form to submit when it’s invalid.
  95. 95. <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate> Preventing the Submit index.html We only want this method to be called if reviewForm.$valid is true.
  96. 96. <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate> Preventing the Submit index.html If valid is false, then addReview is never called.
  97. 97. Doesn’t Submit an Invalid Form How might we give a hint to the user why their form is invalid?
  98. 98. 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, let’s highlight the form field using classes after we start typing, showing if a field is valid or invalid. ng-valid ng-invalid ng-dirty
  99. 99. .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 />
  100. 100. Now with red and green borders!
  101. 101. 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">
  102. 102. Shaping Up with Angular JS Level 4: Creating a Directive with an Associated Controller
  103. 103. 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? <ul class="list-group">
 <li class="list-group-item" ng-repeat="product in store.products"> <h3> {{product.name}} 
 <em class="pull-right">${{product.price}}</em> </h3> <section ng-controller="PanelController as panel"> . . .
  104. 104. 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 ('...') <ul class="list-group">
 <li class="list-group-item" ng-repeat="product in store.products"> <h3 name of file to includeng-include="'product-title.html'" </h3> <section ng-controller="PanelController as panel"> > {{product.name}} 
 <em class="pull-right">${{product.price}}</em>
  105. 105. 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.
  106. 106. <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?
  107. 107. Why Directives? Directives allow you to write HTML that expresses the behavior of your application. Can you tell what this does?<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>
  108. 108. 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
  109. 109. app.directive('productTitle', function(){
 return { ! };
 }); How to Build Custom Directives app.js <product-title></product-title> index.html A configuration object defining how your directive will work
  110. 110. app.directive('productTitle', function(){
 return { ! ! };
 }); How to Build Custom Directives app.js <product-title></product-title> 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 JavaScriptdash in HTML translates to ...
  111. 111. 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… <product-title></product-title> <h3 product-title></h3> <product-title/>
  112. 112. index.html Defining an Attribute Directive app.js <h3>
 {{product.name}}
 <em class="pull-right">$250.00</em>
 </h3> index.html generates into <h3 product-title></h3> 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)
  113. 113. 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.
  114. 114. Shaping Up with Angular JS Creating Our Own Directives
  115. 115. <h3> 
 {{product.name}} 
 <em class="pull-right">${{product.price}}</em> </h3> Reviewing our Directive index.html Template-Expanding Directives An Attribute Directive An Element Directive <h3 product-title></h3> <h3> <product-title></product-title> </h3>
  116. 116. 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>
 <div class="panel" ng-show="panels.isSelected(2)"> . . . </div>
 <div class="panel" ng-show="panels.isSelected(3)"> . . . </div> </section> ><section
  117. 117. First, extract the template... product-panels.html index.html ><section <ul class="nav nav-pills"> . . . </ul>
 <div class="panel" ng-show="panels.isSelected(1)"> . . . </div>
 <div class="panel" ng-show="panels.isSelected(2)"> . . . </div>
 <div class="panel" ng-show="panels.isSelected(3)"> . . . </div> </section> <h3> <product-title> </h3> ng-controller="PanelController as panels" . . . </product-panels> <product-panels >
  118. 118. Now write the Directive ... app.js index.html ng-controller="PanelController as panels" . . . </product-panels> <product-panels > app.directive('productPanels', function(){
 return { restrict: 'E', templateUrl: 'product-panels.html' };
 });
  119. 119. What about the Controller? app.js index.html ng-controller="PanelController as panels" . . . </product-panels> <product-panels > app.directive('productPanels', function(){
 return { restrict: 'E', templateUrl: 'product-panels.html' };
 }); app.controller('PanelController', function(){ . . . }); First we need to move the functionality inside the directive
  120. 120. Moving the Controller Inside app.js index.html ng-controller="PanelController as panels" . . . </product-panels> <product-panels > app.directive('productPanels', function(){
 return { restrict: 'E', templateUrl: 'product-panels.html' };
 }); , Next, move the alias inside function(){ . . . controller: }
  121. 121. 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: }
  122. 122. Challenges
  123. 123. Shaping Up with Angular JS Level 5: Dependencies and Services
  124. 124. (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(){ . . . });
  125. 125. (function(){
 var app = angular.module('store', [ Extract into a new file ... products.js app.js . . .
 })(); app.controller('StoreController', function(){ . . . }); ]); products.js app.directive('productTitle', function(){ . . . }); ! app.directive('productGallery', function(){ . . . }); ! app.directive('productPanels', function(){ . . . });
  126. 126. (function(){
 var app = angular.module('store', [ Make a new Module app.js . . .
 })(); app.controller('StoreController', function(){ . . . }); ]); 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. app.directive('productTitle', function(){ . . . }); ! app.directive('productGallery', function(){ . . . }); ! app.directive('productPanels', function(){ . . . });
  127. 127. (function(){
 var app = angular.module('store', [ Add it to the dependencies ... app.js . . .
 })(); app.controller('StoreController', function(){ . . . }); ]); app.directive('productTitle', function(){ . . . }); app.directive('productGallery', function(){ . . . }); app.directive('productPanels', function(){ . . . }); products.js (function(){
 var app = angular.module('store })(); -products', [ ]); 'store-products' Module Name store depends on store-products
  128. 128. <!DOCTYPE html>
 <html ng-app="store">
 <head> . . . </head>
 <body ng-controller="StoreController as store">
 . . .
 <script src="angular.js"></script>
 <script src="app.js"></script> We’ll also need to include the file index.html </body>
 </html> <script src="products.js"></script>

  129. 129. 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?
  130. 130. Challenges
  131. 131. 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' ]);
 
 app.controller('StoreController', function(){
 this.products = [ { name: '. . .', price: 1.99, . . . },
 { name: '. . .', price: 1.99, . . . },
 { name: '. . .', price: 1.99, . . . }, . . . 
 });
 })(); . . .
 ];
  132. 132. How do we get that data? app.js How do we fetch our products from an API? http://api.example.com/products.json (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', function(){
 this.products = ???; . . . 
 });
 })(); { name: '. . .', price: 1.99, . . . },
 { name: '. . .', price: 1.99, . . . },
 { name: '. . .', price: 1.99, . . . }, [ . . .
 ]
  133. 133. 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 ...
  134. 134. 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! So how do we use 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
  135. 135. 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 Dependency Injection! app.controller('SomeController', [ '$http', '$log', function($http, $log){
 
 } ]); If you needed more than one
  136. 136. When Angular is Loaded Services are Registered SomeController $http Injector $log app.controller('SomeController', [ '$http', '$log', function($http, $log){
 
 } ]);
  137. 137. app.controller('SomeController', [ '$http', '$log', function($http, $log){
 
 } ]); A Controller is Initialized SomeController $http Injector $log and $log, too ... I need $http ... Psst... When I run...
  138. 138. app.controller('SomeController', [ '$http', '$log', function($http, $log){
 
 } ]); Then When the Controller runs ... SomeController $http Injector $log Here ya go! Dependency Injection!
  139. 139. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', So where were we? app.js ){function( this.products = ???; );} })();
  140. 140. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', Time for your injection! app.js ){function( this.products = ???; );} })(); [ '$http', StoreController needs the $http Service... ...so $http gets injected as an argument! Now what? $http ]
  141. 141. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', Let’s use our Service! app.js ){function( this.products = ???; );} })(); [ '$http', $http $http.get('/products.json') Fetch the contents of products.json... ]
  142. 142. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', Our Service will Return Data app.js ){function( this.products = ???; );} })(); [ '$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...? ]
  143. 143. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', Storing the Data for use in our Page app.js ){function( );} })(); [ '$http', $http $http.get('/products.json').success(function(data){ }); = 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. ]
  144. 144. (function(){
 var app = angular.module('store', [ 'store-products' ]);
 
 app.controller('StoreController', Initialize Products to be a Blank Array app.js ){function( );} })(); [ '$http', $http $http.get('/products.json').success(function(data){ }); = 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. ]
  145. 145. $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:
  146. 146. Challenges

×