Doubly nested views : UI-Router or UI-Bootstrap tabs / accordion?

Question

I am a total Angular (and JS) nebwie (with plenty of other s/w development experience, however).

I want to develop something like this:

Answer 1

I would recommend to use angular $routeProvider for your task. This will make easy to handle code and view fragments.

With bootstrap you will need to put all the code on single page and that is less manageable. Have a look at

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ and

For nested views

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

Also $routeProvider is better for navigation. Back Forward through view...

Angular will load views when required.(Lazy loading.) So better for performance...

Hope this will help.

Answer 2

I personally don't get the point of wanting to use bootstrap tabs with angular's ui-router. It is counter-intuitive. Just don't use bootstrap's tabs and set up the "sub-tabs" in the angular config. This will also make your code more readable. Only add ui-bootstrap if you NEED the extra features. An example config is below

  $stateProvider.state('A', {
  url: "/A",
   controller: "testController",
  templateUrl:'pages/A.html'
})    
 .state('A.B', {
  url: "/A/B",
   controller: "testController2",
  templateUrl:'pages/A.B.html'
})    

Answer 3

Yes, ui-router & ui-bootstrap.tabs are the best tools for the job at the moment. To do something similar would require mixing two types of ui-router config patterns, nest views & multiple named views. I'd suggest reading both these wiki pages:

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Here's a basic draft demo of something similar to your illustration, using ui-router & ui-bootstrap.tabs: http://plnkr.co/edit/BUbCR8?p=preview

The easiest way to get started is to use ng-boilerplate https://github.com/ngbp/ngbp, it uses ui-router & has best-practice directory structure. It also addresses performance issues by compiling html to js & adding templates to $templateCache, thus kicking lots of XHR requests to the curb.

Regards to data downloads, data would typically be managed by a angularJS service singleton instance, separate from any views. How & when you invoke any service from any view is totally your choice. This is a pretty good tutorial on angular services: http://www.ng-newsletter.com/posts/beginner2expert-services.html