Dynamic tabs in AngularJS with routing

Question

I want to create a tab control, which supports both static and dynamic tabs.
The dynamic tabs are of N different types, and display their contents according to some id.
I would like to do all that using routing (ui-router probably), since I would like deep linking and all the other benefits that come with it.

I've been trying to find an example on the web, but couldn't find any (I did find some questions resembling this one on other sites though, alas, they were not answered).

The closest thing I found was ui-router-extras which offer functionality that seem to be a good starting place, however, I'm still not sure if what I would like to achieve would be possible using it.

Any ideas if this is possible, any guidelines or suggestions on how to get started ?

Answer 1

I think the best way to create this if you have a lot of tabs would be using a controller for the tabs which has the scope for all sections you want to have, and then a view which ng-repeats through all the tabs, populating your view.

I recommend for the style that you try bootstrap's nav-tabs if they fit your design ( http://getbootstrap.com/components/#nav-tabs )

If you have few sections, you could just hardcode the tabs into the view, each with it's ui-sref.