12

I am a total Angular (and JS) beginner.

I want to develop something like this:

enter image description here

(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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551

3 Answers3

20

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

cheekybastard
  • 5,535
  • 3
  • 22
  • 26
  • Aaaargh!! I just cannot convert your List 1, List 2 on the left tab, to another two tabs, each with a view, instead of a list :-( – Mawg says reinstate Monica Mar 06 '14 at 09:54
  • If you can show me how, I will award a bounty. I have the rest of my app almost working; I just can't frame it nicely in nested tabs. – Mawg says reinstate Monica Mar 06 '14 at 10:17
  • 1
    The links actually go to new views that are nested, the lists are rendering in a different view/state to the root/parent. Above the tabs, watch the "$state" & "$state url" change when you click tabs or links. – cheekybastard Mar 06 '14 at 13:58
  • Sigh. I am just staring with Angular. I only want to make nested tabsheets – Mawg says reinstate Monica Mar 06 '14 at 17:45
  • Thanks. That was what I needed to spur me on. Before posting the code, I studied your original again & got my 2 rows of tabs (unfortunately, I now get "Could not resolve '.link1' from state 'left.link1'", but I'll try to figure that out). Your code will be the basis of my app. Thanks – Mawg says reinstate Monica Mar 07 '14 at 06:12
  • Fixed it. Now just wondering how to set an initial consent for each view. I guess I find the `onShow` or `onClick` method & call that. I will play around with your example. This is F U N – Mawg says reinstate Monica Mar 08 '14 at 11:26
  • 1
    Glad it helped, cheers. For initial content/data for a view add `ng-init="functionCallingWhatever()"` to the top of the template of the view. In the controller, `$scope.functionCallingWhatever` can call the injected `service` instance thats linked to the data. – cheekybastard Mar 09 '14 at 05:06
  • I used this as a starting point. One thing missing is that the selected tab doesn't update with the browser back/forward buttons. I fixed this by moving the `ui-sref` and `ui-sref-active` up into the tab directive: `` – martiansnoop Jul 24 '14 at 01:44
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.

Nikunj Tilva
  • 21
  • 3
  • +1 and thanks. "With bootstrap you will need to put all the code on single page". Well, I want a Single Page Application, but I guess that you are meaning "put all of the code into one file"? If so, can I not use Partials? Oh, that's what you mean when you say `user $routeProvider`, isn't it. I see. Thanks. – Mawg says reinstate Monica Mar 05 '14 at 07:21
1

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'
})
Quentin Mayo
  • 390
  • 4
  • 11