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?

score 11 · Answer 1 · answered Dec 22 '15 at 15:31

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.

score 6 · Answer 2 · edited May 23 '17 at 10:28

Nested states can be used with both nested and parallel views.

Just to note something about nested states.

What makes nested states great is that you can easily share/inherit data from parent to child view.

e.g:

Lets say you have some pages that require a user has logged in.

$stateProvider
.state('admin', {
    url: '/admin'
    resolve: { authenticate: authenticate }
})
.state('admin.users', {
    url: '/users'
})

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) {
        // Resolve the promise successfully
        return $q.when();
    } else {
        $timeout(function() {
            // This code runs after the authentication promise has been rejected.
            // Go to the log-in page
            $state.go('login', {}, {reload:true});
        });
        // Reject the authentication promise to prevent the state from loading

    return $q.reject();
}

Now every state that is a child state of admin has to pass authenticate service ( even if you navigate directly to admin/users/ ).

So basically in the resolve you can put anything and all the child states will inherit from that.

As for parallel views you have complete control over your layouts.
@TonyGW's example is great

You can use them both in your app at the same time, I mean nested states and parallel views and you also can have parallel nested views. It really depends on the structure of your layout layout.

If you want child states to appear inside the html of the parent state you have to use nested views.

Angular ui-router: nested views vs multiple views

2 Answers2