Article Series
- Tutorial 1: Angular JS
- Tutorial 2: Controllers
- Tutorial 3: Controllers
- Tutorial 4: Controllers: Advanced
- Tutorial 5: Models
- Tutorial 6: Services
Prerequisites: AngularJS: Controllers: Tutorial 3
In this tutorial, we will look at more of the beautification aspect using few more directives.We will use the same Book Store Application and try to create tabs for Description and Reviews.
We would modify our earlier HTML code as below:
<!DOCTYPE html>
<html lang="en" ng-app="Namespace">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/templates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">
</script>
<script src="javascript/app1.js"></script>
</head>
<body ng-controller="ControllerName as control">
Hello {{name}}
<h1>Welcome to my book store</h1>
<div ng-repeat="arr in bookarray">
<table>
<tr>
<td>
<div>
<img ng-src="{{arr.bookImage}}" />
</div></td>
<td>
<div>
<div>
<b>Book Name :</b>{{arr.bookName}}</div>
<div>
<b>Book Cost :</b>{{arr.bookCost | currency}}</div>
</div></td>
</tr>
</table>
<section ng-controller="PanelSwitcher as panel">
<ul class="book tabs" id="menu">
<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(2)">Reviews</a></li>
</ul>
<div id="panel1" ng-show="panel.isSelected(1)">
{{arr.bookDescription}}
</div>
<div id="panel2" ng-show="panel.isSelected(2)">
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl">
<blockquote ng-repeat="review in arr.reviews">
<b>Stars: {{review.stars}}</b> {{review.body}}
<cite>by: {{review.author}}</cite></blockquote>
<select name="dropdown" ng-model="review.stars">
<option value="1">1 star</option>
<option value="2">2 stars</option>
<option value="2">3 stars</option>
<option value="2">4 stars</option>
<option value="2">5 stars</option>
</select>
<textarea placeholder="Comments" ng-model="review.body"></textarea>
<label>by:</label>
<input type="email" placeholder="xyz@abc.com" ng-model="review.author" />
<input type="submit" value="Submit" />
</form>
</div>
</section>
</div>
</body>
</html>
From the above, we have added a href for tabs and then made use of ‘ng-click’. We have also used ‘ng-show’ for displaying a particular tab at once. This is equivalent to conditional visibility. ‘active:tab’ is used to show to clicked or focused element.
But from the above, we have a lot of code in the HTML. This is like our View and we would like our view to be clean and with very little code. So we will again make use of the Controller and move the selection of tab and displaying of tab in a new controller as below:
Namespace.controller('PanelSwitcher', function () {
this.tab = 1;
this.selectTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
})
We have just created 2 methods/functions which are set the tab and receive the tab.
And then, we have modified our HTML code as below which looks much more cleaner now !!
<body ng-controller="ControllerName as control">
Hello {{name}}
<h1>Welcome to my book store</h1>
<div ng-repeat="arr in bookarray">
<table>
<tr>
<td>
<div>
<img ng-src="{{arr.bookImage}}" />
</div></td>
<td>
<div>
<div>
<b>Book Name :</b>{{arr.bookName}}</div>
<div>
<b>Book Cost :</b>{{arr.bookCost | currency}}</div>
</div></td>
</tr>
</table>
<section ng-controller="PanelSwitcher as panel">
<ul class="book tabs" id="menu">
<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(2)">Reviews</a></li>
</ul>
<div id="panel1" ng-show="panel.isSelected(1)">
{{arr.bookDescription}}
</div>
<div id="panel2" ng-show="panel.isSelected(2)">
No Reviews
</div>
</section>
</div>
</body>
The output would look like below:
We will look at how we can ask users to input data using Forms and Models in the next post. Happy coding !!!
