Angular UI router nested views

Question

I have a structure like this:

Answer 1

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:

and the index.html will contain placeholder:

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