app.angular(“sample” []); Note : Without [] refer to previous existing module and with [] indicate it creating new module.
Tab:
Adding new Controller
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="list-group" ng-controller="StoreController as store">
<header>
<h1 class="text-center">Flatlander Crafted Gems</h1>
<h2 class="text-center">– an Angular store –</h2>
</header>
<div class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<!-- Image Gallery -->
<div class='gallery' ng-controller="GalleryController as gallery" ng-show="product.images.length">
<img ng-src="{{product.images[gallery.current]}}" />
<ul class="list-inline thumbs">
<li class="thumbnail" ng-repeat="image in product.images">
<img ng-src="{{image}}" />
</li>
</ul>
</div>
<section class="tab" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active: tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a></li>
<li ng-class="{ active: tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Specs</a></li>
<li ng-class="{ active: tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Reviews</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>
<div ng-show="tab.isSet(2)">
<h4>Specs</h4>
<blockquote>Shine: {{product.shine}}</blockquote>
</div>
<div ng-show="tab.isSet(3)">
<h4>Reviews</h4>
</div>
</section>
</div>
</body>
</html>app.js
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
});
app.controller('GalleryController', function(){
this.current = 0;
this.setCurrent = function(newGallery){
this.current = newGallery || 0;
};
});
var gems = [
{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: [
"images/gem-02.gif",
"images/gem-05.gif",
"images/gem-09.gif"
],
reviews: [{
stars: 5,
body: "I love this gem!",
author: "joe@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "This gem sucks.",
author: "tim@example.org",
createdOn: 1397490980837
}]
},
{
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif",
],
reviews: [{
stars: 3,
body: "I think this gem was just OK, could honestly use more shine, IMO.",
author: "JimmyDean@example.org",
createdOn: 1397490980837
}, {
stars: 4,
body: "Any gem with 12 faces is for me!",
author: "gemsRock@example.org",
createdOn: 1397490980837
}]
},
{
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-09.gif"
],
reviews: [{
stars: 1,
body: "This gem is WAY too expensive for its rarity value.",
author: "turtleguyy@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "BBW: High Shine != High Quality.",
author: "LouisW407@example.org",
createdOn: 1397490980837
}, {
stars: 1,
body: "Don't waste your rubles!",
author: "nat@example.org",
createdOn: 1397490980837
}]
}
];
})();
Example 2:
Adding Review to the form
<form name="reviewForm" ng-controller = "ReviewController as reviewCtrl"
ng-submit="reviewCtrl.addReview(product)">
<blockquote>
<strong>{{reviewCtrl.review.stars}} Stars</strong>
{{reviewCtrl.review.body}}
<cite class="clearfix">—{{reviewCtrl.review.author}}</cite>
</blockquote>
<h4>Submit a Review</h4>
<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars">
<option value="">Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Write a short review of the product..." title="Review"></textarea>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" />
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" value="Submit Review" />
</fieldset>
</form>Displaying the reviews for all product
<body ng-controller="StoreController as store">
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<section ng-controller="TabController as tab">
<!-- Product Reviews List -->
<ul>
<h4>Reviews</h4>
<li ng-repeat="review in product.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<cite class="clearfix">{{review.author}}</cite>
</blockquote>
</li>
</ul>
</div>
</section>
CREATING CUSTOM DIRECTIVE ELEMENT
===================================
index.html
<product-description ng-show="tab.isSet(1)"></product-description>
product-description.html
-----------------------
<div>
<h4>Description</h4>
<blockquote>{{product.description}}</blockquote>
</div>
app.js
app.directive("productDescription", function(){
return{
restrict: 'E',
templateUrl: 'product-description.html'
};
});
CREATING CUSTOM DIRECTIVE ATTRIBUTE
====================================
product-specs.html
<h4>Specs</h4>
<ul class="list-unstyled">
<li><strong>Shine</strong>: {{product.shine}}</li>
<li><strong>Faces</strong>: {{product.faces}}</li>
<li><strong>Rarity</strong> : {{product.rarity}}</li>
<li><strong>Color</strong> : {{product.color}}</li>
</ul>
app.js
app.directive("productSpecs", function(){
return{
restrict: 'A',
templateUrl: 'product-specs.html'
};
});
index.html
<div product-specs ng-show="tab.isSet(2)"></div>
Creating custom directive with controller
———————————————–
app.js
app.directive("productTabs", function(){
return{
restrict: 'E',
templateUrl: 'product-tabs.html',
controller: function(){
this.tab = 1;
this.isSet = function(checkTab) {
return this.tab === checkTab;
};
this.setTab = function(setTab) {
this.tab = setTab;
};
},
controllerAs: "tab"
};
});
product-task.html
<section>
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a>
</li>
<li ng-class="{ active:tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Specs</a>
</li>
<li ng-class="{ active:tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Reviews</a>
</li>
</ul>
<!-- Description Tab's Content -->
<div ng-show="tab.isSet(1)" ng-include="'product-description.html'"></div>
<!-- Spec Tab's Content -->
<div product-specs ng-show="tmotsangSnowlion81tab.isSet(2)"></div>
<!-- Review Tab's Content -->
<product-reviews ng-show="tab.isSet(3)"></product-reviews>
</section>
index.html
<product-tabs></product-tabs>
Create an element directive called productGallery with controller
—————————————————————————–
app.js
app.directive('productGallery', function(){
return{
restrict: 'E',
templateUrl: 'product-gallery.html',
controller : function() {
this.current = 0;
this.setCurrent = function(imageNumber) {
this.current = imageNumber || 0;
};
},
controllerAs: 'gallery'
};
});
product-gallery.html
-------------------
<div ng-show="product.images.length">
<div class="img-wrap">
<img ng-src="{{product.images[gallery.current]}}" />
</div>
<ul class="img-thumbnails clearfix">
<li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
<img ng-src="{{image}}" />
</li>
</ul>
</div>
index.html
<product-gallery></product-gallery>
Creating new Module and adding dependency
—————————————————-
We have to follow three step
1. Define a modul, save as products.app
(function() {
var app = angular.module('store-directives', []);
app.directive("productDescription", function() {
return {
restrict: 'E',
templateUrl: "product-description.html"
};
});
app.directive("productReviews", function() {
return {
restrict: 'E',
templateUrl: "product-reviews.html"
};
});
app.directive("productSpecs", function() {
return {
restrict:"A",
templateUrl: "product-specs.html"
};
});
app.directive("productTabs", function() {
return {
restrict: "E",
templateUrl: "product-tabs.html",
controller: function() {
this.tab = 1;
this.isSet = function(checkTab) {
return this.tab === checkTab;
};
this.setTab = function(activeTab) {
this.tab = activeTab;
};
},
controllerAs: "tab"
};
});
app.directive("productGallery", function() {
return {
restrict: "E",
templateUrl: "product-gallery.html",
controller: function() {
this.current = 0;
this.setCurrent = function(imageNumber){
this.current = imageNumber || 0;
};
},
controllerAs: "gallery"
};
});
})();
2. Add the dependency of store-directives in app.js file
function() {
var app = angular.module('gemStore', ['store-directives']);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});
var gems = [{
name: 'Azurite',
description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
shine: 8,
price: 110.50,
rarity: 7,
color: '#CCC',
faces: 14,
images: [
"images/gem-02.gif",
"images/gem-05.gif",
"images/gem-09.gif"
],
reviews: []
}, {
name: 'Bloodstone',
description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
shine: 9,
price: 22.90,
rarity: 6,
color: '#EEE',
faces: 12,
images: [
"images/gem-01.gif",
"images/gem-03.gif",
"images/gem-04.gif",
],
reviews: []
}, {
name: 'Zircon',
description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
shine: 70,
price: 1100,
rarity: 2,
color: '#000',
faces: 6,
images: [
"images/gem-06.gif",
"images/gem-07.gif",
"images/gem-08.gif"
],
reviews: []
}];
})();
Step 3: Define link of module in index.html
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
CREATING HTTP SERVICE
———————————–
app.js
(function() {
var app = angular.module('gemStore', ['store-directives']);
app.controller('StoreController', ['$http', function($http){
var store = this;
store.products = [];
$http.get('/store-products.json').success(function(data){
store.products = data;
});
}]);
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});
})();
