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!

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 3, 2014 at 13:49

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

6 Comments

guidsen Over a year ago

In the index I just inject the view based on the URL. Isn't there another way? Because not every state has nested views. Only this one. I've updated my answer.

Radim Köhler Over a year ago

Not sure were is the issue!? Each root state (there could be more of them) must start somewhere. It must be injected into some top level view (s). But that root state could define more views (not more states) as in my example. There is only one State "project", which targets two views. One of them is in the index.html, the second is even part of the first one. With that you can achieve anything, just declare the ui-view where you want. I am not sure what I am missing...

guidsen Over a year ago

So that means I have to make a "" view in every other state..?

guidsen Over a year ago

Well sorry, I guess my code didn't updated in the browser. Now it works. Thanks!

Radim Köhler Over a year ago

Great to see that! because the ui-router is really awesome library!

|

Collectives™ on Stack Overflow

Angular ui-router nested view

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related