In the first, second, and third part of the series, we focused on various aspects of AngularJS like directives, controllers, scope, and two-way data binding features. In this last part of the series, we’ll learn how to integrate AngularJS directives based on Twitter Bootstrap’s markup and CSS from UI Bootstrap.
Bootstrapping the App
First let’s give our app a clean look using Twitter Bootstrap. We’ll be using a starter template. Here is the starter template html, let’s name it bootstrap_index.html.
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Visualization App Using AngularJS</h1>
<hr />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="lib/common/bootstrap.min.js"></script>
</body>
</html>Place it in the same directory as index.html. Also make sure to copy the bootstrap.min.css, starter_template.css, and bootstrap.min.js files to their respective folders.
From the terminal, type:
node scripts/web-server.jsThen point your browser to http://localhost:5000/app/bootstrap_index.html. You should see the starter template.
Bootstrap Tab
Now, we’ll be adding a Tab directive from AngularJS Bootstrap. First, add the ui.bootstrap module into our app. Open up app/js/app.js and add the ui.bootstrap module. Here is the modified app.js:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'ui.bootstrap'
]).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl1'
});
$routeProvider.when('/', {
templateUrl: 'index.html',
controller: 'MyCtrl1'
});
$routeProvider.otherwise({
redirectTo: '/view1'
});
}
]);Download ui-bootstrap-tpls-0.10.0.js from UI Bootstrap and include it in bootstrap_index.html. Also include all the scripts that we had included in index.html in bootstrap_index.html. In order to add a Tab, simply add the following code in bootstrap_index.html
<div>
<tabset>
<tab heading="Welcome">
<h4>AngularJS Data Visualization App</h4>
</tab>
<tab heading="Visualization">Data Visualization</tab>
</tabset>
</div>Here is what the modified bootstrap_index.html looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Visualization App Using AngularJS</h1>
<hr/>
</div>
<div>
<tabset>
<tab heading="Welcome">
<h4>AngularJS Data Visualization App</h4>
</tab>
<tab heading="Visualization">Data Visualization</tab>
</tabset>
</div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="lib/common/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/common/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>Restart the node server and point the browser to http://localhost:5000/app/bootstrap_index.html to see the bootstrap tab.
Next, we’ll integrate our index.html into the second tab of bootstrap_index.html. From index.html, copy the code inside the body, adding a div container. It should look like this:
<div ng-controller="MyCtrl1">
<div g-chart></div>
<select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
</select>
<div>Angular seed app: v<span app-version></span>
</div>
</div>As you can see there is an extra div which is used to define controller logic for this portion. In bootstrap_index.html, paste this into:
<tab heading="Visualization">Data Visualization</tab>It should now look like this:
<tab heading="Visualization">
<div ng-controller="MyCtrl1">
<div g-chart></div>
<select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
</select>
<div>Angular seed app: v<span app-version></span>
</div>
</div>
</tab>After restarting the node server, point the browser to http://localhost:5000/app/bootstrap_index.html. You should see the data visualization portion in the visualization tab.
Bootstrap Dropdown
Until now, we were using the HTML dropdown for selecting the chart type. Let’s bootstrap the dropdown too. Replace the existing select control with the following HTML code:
<li class="dropdown">
<a class="dropdown-toggle">
Change Chart Type
</a>
<ul class="dropdown-menu">
<li ng-repeat="type in chartTypes">
<a>{{type.typeName}}</a>
</li>
</ul>
</li>Restart the server, refresh the browser, and you should see a link title Change Chart Type, instead of the dropdown. If you click on that it will expand into a nice looking dropdown. But, it’s not fully functional. So, let’s make it functional.
First, we need to set Default Chart Type to display instead of Change Chart Type. Open app/js/controllers.js and declare one more variable named chart.typeName in the MyCtrl1 controller.
chart.typeName = $scope.chartTypes[0].typeName;Next, set its value in the selectType function as shown below.
$scope.selectType = function (type) {
$scope.chart.type = type.typeValue;
$scope.chart.typeName = type.typeName;
}Next, modify the dropdown HTML code as shown below.
<li class="dropdown">
<a class="dropdown-toggle">
{{chart.typeName}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="type in chartTypes">
<a ng-click="selectType(type)">{{type.typeName}}</a>
</li>
</ul>
</li>Now, selecting a chart type from the dropdown in the visualization tab will cause the chart to change.
Conclusion
In this tutorial, we focused on using two of the AngularJS directives, created by the AngularUI team, in our Angular app. You can try other directives here. In the meantime, the demo code is available on GitHub. A live demo is also hosted on Heroku.
Jay RajJay is a Software Engineer and Writer. He blogs occasionally at Code Handbook and Tech Illumination.
