- ng-app: Load directives in Page
- ng-controller: Load controller in an HTML element
- ng-show: Display HTML element based on expression
- ng-hide: Hide GTML element based on expression
- ng-repeat: For Loop
<div ng-repeat="product in store.products"> display product details... </div>
- ng-source: For loading resource files such as images in
img
tag - ng-click:
- ng-init - initial value
- ng-class
Expressions
Modules
- where we write piece of our Angular application
- makes our code more maintainable, testable and readable
- where we define dependencies for our application
More Operations: http://docs.angularjs.org/guide/expression
Controller
- controllers are where we define our app's behavior by defining functions and values.
{{data | filter:options}}
date: {{"1388123412323" | date:'MM/dd/yyyy @ h:mma'}}
Uppercase & Lowercase: {{'hello bahul' | uppercase}}
limit to:
{{'Hello New York how you doin' | limitTo:8}}
ng-repeat="product in store.products | limitTo:3"
order by:
<li ng-repeat="product in store.products | orderBy:'-price'">
<section ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }">
<a href="#" ng-click="tab = 2">Description</a>
</li>
<li ng-class="{ active:tab === 2 }">
<a href="#" ng-click="tab = 2">Specifications</a>
</li>
<li ng-class="{ active:tab === 3 }">
<a href="#" ng-click="tab = 3">Reviews</a>
</li>
</ul>
<div class="panel" ng-show="tab === 1"> ... </div>
<div class="panel" ng-show="tab === 2"> ... </div>
<div class="panel" ng-show="tab === 3"> ... </div>
</section>
Here in the line active:tab === 1
, active
is the class that is to be set, based on the result of expression tab === 1
.
Here's a much cleaner way. Logic being separated from the html code
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{ active:panel.isSelected(1) }">
<a href="#" ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{ active:panel.isSelected(2) }">
<a href="#" ng-click="panel.selectTab(1)">Specifications</a>
</li>
<li ng-class="{ active:panel.isSelected(3) }">
<a href="#" ng-click="panel.selectTab(1)">Reviews</a>
</li>
</ul>
<div class="panel" ng-show="tab === 1"> ... </div>
<div class="panel" ng-show="tab === 2"> ... </div>
<div class="panel" ng-show="tab === 3"> ... </div>
</section>
app.controller("PanelController", function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
}
this.isSelected = function(setTab) {
return this.tab === setTab;
}
});
<product-panels>
...
</product-panels>
app.directive('ProductPanels', function() {
return {
restrict: 'E',
templateUrl: 'product-panels.html',
controller: function() {},
controllerAs: 'panels'
};
})