Angular ui-router: nested views vs multiple views

Question

ui-router is a great alternative to angular's standard router; it supports nested states and views and multiple views.

I am a little confused, though, by the difference between the two. It seems to me that multiple views can almost always be thinked and implemented as nested views of an "higher-order" component. For example, if we consider an app with a sidebar and a content box, we may model them as two "parallel" views or as making the sidebar the parent view and the content-pane its nested child view that depends on the selected sidebar item.

The readme itself seems to suggest the division is not really clear-cut:

Pro Tip: While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your views, and pairing those views with nested states.

When should I use multiple views and when nested views? Is there some criteria that can help you choose most of the time which is the correct way to model the states, nested vs multiple?

Answer 1

In my understanding, the multiple views are primarily for layout purpose, while the nested views are for parent-children hierarchical views. Using the case you mentioned as an example:

The sidebar and the content could be arranged as two distinct views:

$stateProvider.state('main', {
      abstract: true,
      url: '/main', //base url for the app
      views: {
         '': {
              //this serves as a main frame for the multiple views
              templateUrl: 'path/to/the/main/frame/template.html'
         },
         'sideBar@main': {
             templateUrl: 'path/to/the/sidebar/template.html'
          },
        'content@main': {
             templateUrl: 'path/to/the/content/template.html'
         }
      }
});

The path/to/the/main/frame/template.html template may contain the following frame:

<div class="row"> Header section </div>
<div class="row>
  <div class="col-sm-4"><div ui-view="sideBar"></div></div>
  <div class="col-sm-8"><div ui-view="content"></div></div>
</div>

Then in the sideBar or the content templates, you can nest their children subview/partials.