The Right Way to Do Tab Navigation in AngularJS / Bootstrap
Solution 1
Take a look at UI Bootstrap. It's essentially Bootstrap components built with Angular directives. There's a Tabs directive that will simplify what you're trying to accomplish.
Solution 2
Give every tab a <div>
and a condition. In the controller, initialize the tabset
and fetch the correct tab from the routeparameters
.
So, your page looks like this:
<div ng-if="vm.showTab2">
and your controller (simplified):
var vm = this;
vm.showTab1 = true;
vm.showTab2 = false;
vm.ToggleTab = function(tabId) {
vm.showTab1 = tabId === ShowTab1;
vm.showTab2 = tabId === ShowTab2;
...
}
...
init();
function init() {
// Get the tabID parameter from the URL (via $routeParams)
var tabId = $routeParams.tabId;
if (tabId !== undefined) {
vm.ToggleTab(tabId);
}
...
}
Your routing:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view:tabId', {
templateUrl: 'view1/view.html',
controller: 'ViewCtrl'
});
}])
And pass the right tabId
in your url: '#view/2' (where 2 === ShowTab2).
Ben Pearce
I'm a freelance programmer located in San Francisco. I specialize in full lifecycle development of apps leveraging web services.
Updated on June 14, 2022Comments
-
Ben Pearce almost 2 years
I want to set up tab based navigation for a web site using AngularJs and Bootstrap and I want to do it the 'right' way. As far as I can tell the 'right' way to set up an angular site is via the AngularJS Seed. I implemented this and what I got as a templated multi file tab site with the following basic ingredients.
With Angular
index.html:
<ul class="nav nav-tabs"> <li class="active"><a href="#/view1">Home</a></li> <li><a href="#/view2">Menu 1</a></li> </ul> <div ng-view></div> <div>Angular seed app: v<span app-version></span></div>
view1.js:
'use strict'; angular.module('myApp.view1', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'view1/view1.html', controller: 'View1Ctrl' }); }]) .controller('View1Ctrl', [function() { }]);
view1.html:
<div>here's some html</div>
...for view2.
With Bootstrap
As far as I can tell the 'right' way to implement tabs with bootstrap is as follows:
index.html:
<div class="container"> <div id="content"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#red" data-toggle="tab">Red</a></li> <li><a href="#orange" data-toggle="tab">Orange</a></li> <li><a href="#yellow" data-toggle="tab">Yellow</a></li> <li><a href="#green" data-toggle="tab">Green</a></li> <li><a href="#blue" data-toggle="tab">Blue</a></li> </ul> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="red"> <h1>Red</h1> <p>red red red red red red</p> </div> <div class="tab-pane" id="orange"> <h1>Orange</h1> <p>orange orange orange orange orange</p> </div> <div class="tab-pane" id="yellow"> <h1>Yellow</h1> <p>yellow yellow yellow yellow yellow</p> </div> <div class="tab-pane" id="green"> <h1>Green</h1> <p>green green green green green</p> </div> <div class="tab-pane" id="blue"> <h1>Blue</h1> <p>blue blue blue blue blue</p> </div> </div> </div>
After lots of messing around I still can't seem to get the boot strap functionality, using Angulars templated model. Can anyone advise me on the 'right' way to do this?