Correct way to navigate through tabs in Angular / Bootstrap
I want to set up tab-based navigation for a website using Angular and Bootstrap and I want to do it the "right" way. As far as I can tell, the "correct" way to create an Angular site is through Angular Seed . I have implemented this and what I got as a multi-database template with the following main 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 some html</div>
... for view2.
With Bootstrap
As far as I can tell the correct way to implement tabs with bootstrap is:
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 a lot of confusion, I still can't get the bootstrap functionality using the Angulars templated model. Can anyone advise me on the "correct" way to do this?
source to share
Have a look at UI Bootstrap . These are essentially Bootstrap components built with Angular directives. There's a Tabs directive in there that will simplify what you are trying to accomplish.
source to share
Give each tab a <div>
and a condition. In the controller, initialize tabset
and select the correct tab from 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 correct one tabId
in your url:'#view/2' (where 2 === ShowTab2).
source to share