Angular UI router nested views

Question

I have a structure like this:

<div ui-view="main">
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

I want to be able to define the templates in the main state like below instead of having to manage it in the child state.

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

I'd like the ui-view named sidebar to not be a child state of main and be populated by the main state's views object instead of by a child state's templateUrl field. How can I do that?

Radim Köhler · Accepted Answer · 2014-08-31T04:21:34.713

We can use more views inside one state, see:

Multiple Named Views

The definition would just need to use the absolute naming:

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

As explained in a detail here:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

So, as snippet above shows, if the content of the

 /modules/blog/partials/index.html

would be:

<div>
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

and the index.html will contain placeholder:

<div ui-view="main" ></div>

Then the

'main' - will be searched in parent root (index.html)
'sidebar@state1' will be evaluated as viewName/target in 'state1' (itself)

An example with similar idea and some layout.html behind...

Thanks for the answer. It's a lot better than the ui-router docs. What about being able to do `
`? Is that possible instead of having a nested view? — Ilan Biala, Aug 31 '14 at 06:19
I was playing with ui-router a lot, and have to say, that this does not make sense to me. Becuase, the *root* `
` is just a wrapping element. It is not an anchor/view target in fact. So, I would use `ui-view="main"` but as one of **inner elements** - as in my example/plunker. `tpl.layout.html` is injected into root *(index.html)*, and then three areas top, left, main... are managed as needed... does it help? — Radim Köhler, Aug 31 '14 at 06:22
If you are asking, if we should siblings `ui-view="main"` and `ui-view="sidebar"` then you've got the point! Both could contain other view targets and also could be filled via absolute names. So YES, what you say, is possible. And it is good idea! ;) Enjoy `ui-router` — Radim Köhler, Aug 31 '14 at 06:26

Angular UI router nested views

1 Answers1

Linked