Treeday Presentation: We're Hiring Angular.js + Node.js Developers
Shaping Up with Angular · Shaping Up with Angular.JS Level 2: Filters, Directives, and Cleaner...
Transcript of Shaping Up with Angular · Shaping Up with Angular.JS Level 2: Filters, Directives, and Cleaner...
![Page 1: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/1.jpg)
![Page 2: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/2.jpg)
Shaping Up with Angular.JSLevel 2: Filters, Directives, and Cleaner Code
![Page 3: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/3.jpg)
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>
![Page 4: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/4.jpg)
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
![Page 5: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/5.jpg)
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
![Page 6: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/6.jpg)
{{ 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">
* *
![Page 7: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/7.jpg)
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 ArrayImage Object
To display the first image in a product: {{product.images[0].full}}
app.js
![Page 8: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/8.jpg)
<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}}"/>
![Page 9: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/9.jpg)
Our Products with Images
![Page 10: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/10.jpg)
Challenges
![Page 11: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/11.jpg)
More With DirectivesHow can I make my application
more interactive?
![Page 12: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/12.jpg)
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>
![Page 13: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/13.jpg)
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>
![Page 14: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/14.jpg)
Introducing a new Directive!
![Page 15: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/15.jpg)
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...
![Page 16: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/16.jpg)
<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.... . .
![Page 17: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/17.jpg)
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
![Page 18: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/18.jpg)
But how do we set an
initial value for a tab?
![Page 19: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/19.jpg)
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> . . .
![Page 20: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/20.jpg)
Now with the Initial Tab
![Page 21: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/21.jpg)
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>
![Page 22: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/22.jpg)
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
![Page 23: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/23.jpg)
![Page 24: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/24.jpg)
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">
![Page 25: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/25.jpg)
Creating our Panel Controller
index.htmlapp.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">
>
![Page 26: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/26.jpg)
Moving our tab initializer
index.htmlapp.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">
![Page 27: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/27.jpg)
Creating our selectTab function
index.htmlapp.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 =
![Page 28: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/28.jpg)
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 =
![Page 29: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/29.jpg)
![Page 30: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/30.jpg)
Challenges
![Page 31: Shaping Up with Angular · 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](https://reader034.fdocuments.in/reader034/viewer/2022043017/5f39c2150b096c32973b3818/html5/thumbnails/31.jpg)