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-31 04:21:34Z

10

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

edited Aug 31, 2014 at 4:21

answered Aug 31, 2014 at 4:12

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ilan Biala Over a year ago

Thanks for the answer. It's a lot better than the ui-router docs. What about being able to do <div ui-view="main"></div><aside ui-view="sidebar"></aside>? Is that possible instead of having a nested view?

Radim Köhler Over a year ago

I was playing with ui-router a lot, and have to say, that this does not make sense to me. Becuase, the root <div ui-view="main"> 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 Over a year ago

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

Collectives™ on Stack Overflow

Angular UI router nested views

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related