Question: I am a total Angular (and JS) beginner.

I want to develop something like this:

![enter image description here](https://i.stack.imgur.com/V17C3.png)

(with apologies to @PhillipKregg for borrowing his excellent illustration).

Effectively, I want nested tabbed notebooks - a row of tabs (views?), each which can contain data or another row of tabs (each of which ...).

Googling seems to return more recommendations for UI-Router, but I imagine that UI-Bootstrap's Tabs or Accordion could also be used (or even UI-Bootstrap's Pagination, with a single view whose contents I update according to the selected page?).

All else being equal, I will go with whichever is easiest for a novice to understand and implement (which is that?).

But - are there performance issues? For instance, will one download the content of all the views immediately or initial page load (thus increasing initial page download time)? Will one only download the data for a view when it becomes active (which seems preferable)?

Anything else I need to consider?

Answer: 
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>
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.