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

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