Angular ui-router nested view

Question

Im trying to inject a nested view into my normal view, using ui-router. I know it's possible by doing ng-include. But I want to solve it by using ui-router.

My html is as follow:

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

Then in my script I got a state:

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

Update - isn't there something like this possible?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

Anyone can find a typo or something? I've read the docs. I am not sure what's wrong.

Thanks in advance!

Answer 1

There is a working plunker, showing how we can make it running

On the index.htm we need to have the <div ui-view="" ></div>, which is the place were we inject the project.html. Then we adjust the state definition, to inject also nested view - using ui-view absolute naming:

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

The absolute name todos@project, will inject the todos.html into the project.html. Check the plunker

See the:

• View Names - Relative vs. Absolute Names

A cite:

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