Angularjs – The Right Way to Do Tab Navigation in AngularJS / Bootstrap

angular-ui, angularjs, navbar, twitter-bootstrap, twitter-bootstrap-3

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?

Best Solution

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.