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.js
Then 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 is a Software Engineer and Writer. He blogs occasionally at Code Handbook and Tech Illumination.