AngularJS UI Bootstrap Tabs that support routing

Question

I would like to use AngularJS UI Bootstrap Tabs in my project, but I need it to support routing.

For example:

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

As far as I can tell from the source code, the current tabs and pane directives doesn't support routing.

What would be the best way to add routing?

score 40 · Accepted Answer · answered Jun 02 '13 at 08:31

40

To add routing you typically use an ng-view directive. I'm not sure it's easy enough to modify angular UI to support what you're looking for, but here's a plunker showing roughly what i think you're looking for (it's not necessarily the best way of doing it - hopefully someone can give you a better solution or improve on this)

answered Jun 02 '13 at 08:31

Chris White

29,949
4
71
93

1

This is the best answer. Don't even bother with the angular-ui-bootstrap tab directives; just implement it with ngRoute. I'd actually just set up a [Plunk](http://plnkr.co/1xA1r2) demonstrating it, and was about to post my own answer, before I realized that it was the same as yours. – user240515 Jan 17 '14 at 19:50
I like this waaay better than the Angular UI Bootstrap approach. Which I don't understand anyway btw. I see no real reason to rebuild Bootstrap.js into custom angular directives. Those need to be separate to utilize the best parts of both angular and bootstrap. Disclaimer: this is purely my 2ct. – Gerben Rampaart Jul 11 '14 at 10:11
Notice in the plunk how if you navigate between tabs and then navigate back (press back button on the keyboard), the proper view is rendered but the proper active tab is not? See this for a solution: http://stackoverflow.com/a/25735997/410937 – atconway Sep 09 '14 at 02:47

score 16 · Answer 2 · answered Oct 05 '15 at 21:16

16

Use data-target="#tab1". Worked for me

answered Oct 05 '15 at 21:16

Harish B

181
1
2

Thanks, that solved angular route being invoked when clicking a tab – David Jul 11 '16 at 08:16
This is a great answer when you have other elements on the page you don't want the routing to nav away from. +1 :) – Simon Willan Feb 27 '17 at 11:41

score 6 · Answer 3 · answered Feb 18 '15 at 15:40

6

This answer really helped me http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (very simple but powerful solution)

answered Feb 18 '15 at 15:40

dciccale

442
6
12

Still a great answer - easy to adapt to different backends. – Daniel Jan 22 '20 at 21:50

score 5 · Answer 4 · answered May 19 '14 at 16:17

I also have this requirement and I'm doing something similar to the answer provided by Chris, but I'm also using AngularUI router, because ngRouter does not support nested views and it is possible you'll have the tabs content view inside another view (I did) and that won't work with ng-view.

score 2 · Answer 5 · answered Jul 03 '13 at 05:39

2

you could pass your own custom key value pairs in the route definition and achieve this. here's a good example: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

answered Jul 03 '13 at 05:39

user1319462

31
2

Link only answers are not allowed. Read the stackoverflow help. – jgauffin Jul 03 '13 at 06:22
1

Summarize the solution so that your answer works without the link, and I'll remove the downvote. – user240515 Jan 18 '14 at 03:38

score 2 · Answer 6 · answered Feb 09 '15 at 20:59

2

Agree with the use of UI-Router which tracks states and works great with nested views. Speaking particularly of your Bootstrap tabs issue there is a great implementation that leverages UI Router: UI-Router Tabs

answered Feb 09 '15 at 20:59

Yves

129
1
7

score 1 · Answer 7 · answered May 19 '17 at 07:01

If you have a route called settings and you want to have tabs in that settings page something like this works.

<div class="right-side" align="center">
    <div class="settings-body">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#!/settings#private_email">Private email</a></li>
          <li><a data-toggle="tab" href="#!/settings#signature">Signature</a></li>
          <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        </ul>

        <div class="tab-content">
          <div id="private_email" class="tab-pane fade in active">
            <div class="row" ng-controller="SettingsController">
                <div>
                   <button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button>
                   <button class="btn btn-danger">Deactivate email</button>
                </div>
            </div>
          </div>
          <div id="signature" class="tab-pane fade">
              <textarea ui-tinymce="tinymceOptions" ng-model="signature"></textarea>
              <div class="send-btn">
                <button name="send" ng-click="" class="btn btn-primary">Save signature</button>
              </div>
          </div>
          <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
          </div>
        </div>
    </div>
</div>

This would be my best solution, though I just remove #! in href="#!/settings#private_email" . The benefit is that you don't need to add any js code, only pure # navigation. — Ted Corleone, Jul 10 '17 at 16:01

Jeffrey Roosendaal · Answer 8 · 2017-07-06T13:09:28.807

I got tabs with routing working the following way.

It's able to do everything you want from dynamic tabs, and it's actually very simple.

Tabs with a ui-view, so it can dynamically load templates,
Update routing in URL
Set history state
When directly navigating to a route with a tabbed view, the correct tab is marked as active.

Define the tabs with a parameter in your router

.state('app.tabs', {
    url         : '/tabs',
    template    : template/tabs.html,
})
.state('app.tabs.tab1', {
    url         : '/tab1',
    templateUrl : 'template/tab1.html',
    params      : {
        tab         : 'tab1'
    }
})
.state('app.visitors.browser.analytics', {
    url         : '/tab1',
    templateUrl : 'template/tab2.html',
    params      : {
        tab         : 'tab2'
    }
})

The tabs template (tabs.html) is

<div ng-controller="TabCtrl as $tabs">
    <uib-tabset active="$tabs.activeTab">
        <uib-tab heading="This is tab 1" index="'tab1'" ui-sref="app.tabs.tab1"></uib-tab>
        <uib-tab heading="This is tab 2" index="'tab2'" ui-sref="app.tabs.tab2"></uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

Which is paired with a very simple controller for getting the current active tab:

app.controller('TabCtrl', function($stateParams) {
    this.activeTab = $stateParams.tab;
})

score 0 · Answer 9 · answered Feb 07 '15 at 18:40

just a small add to accepted answer: i needed to keep the current tab at page refresh so i used a switch like this:

$scope.tabs = [
            { link : '#/furnizori', label : 'Furnizori' },
            { link : '#/total', label : 'Total' },
            { link : '#/clienti', label : 'Clienti' },
            { link : '#/centralizator', label : 'Centralizator' },
            { link : '#/optiuni', label : 'Optiuni' }
        ];

        switch ($location.path()) {
            case '/furnizori':
                $scope.selectedTab = $scope.tabs[0];
                break;

            case '/total':
                $scope.selectedTab = $scope.tabs[1];
                break;

            case '/clienti':
                $scope.selectedTab = $scope.tabs[2];
                break;

            case '/centralizator':
                $scope.selectedTab = $scope.tabs[3];
                break;

            case '/optiuni':
                $scope.selectedTab = $scope.tabs[4];
                break;

            default:
                $scope.selectedTab = $scope.tabs[0];
                break;
        }

score -2 · Answer 10 · answered Jun 07 '13 at 05:02

-2

This aught to be able to do what you want:

https://github.com/angular-ui/ui-router

answered Jun 07 '13 at 05:02

ticktock

133
5

6

This is not enough direction to answer the question. – Daniel Kaplan Jun 30 '15 at 03:28

AngularJS UI Bootstrap Tabs that support routing

10 Answers10

Linked