AngularJS - Nested states

Question

When using nested states from UI Router, this will only work if you navigate the page through the nest. i.e.:

If I have

.state('home', {
    url: '/',
    templateUrl: 'home.html'
    ...
})
.state('home.page', {
    url: '/page',
    templateUrl: 'page.html'
    ...
})
.state('home.page.sub' , {
    url: '/page/sub',
    templateUrl: 'sub.html'
    ...
})

Now the problem is if I directly visit /page/sub without going to / and then click on link to go to /page and finally navigate to /page/sub, then the linking is not proper and the elements of the page will not fully load.

How can I fix this linkage issue?

Community · Accepted Answer · 2017-05-23 10:32:24Z

1

Almost the same issue could be found here:

angular ui-router parent url set to /

I've created plunker showing a working example. The trick here is to use one of the ui-router features:

Absolute Routes (^)

As we can observe in the plunker/code snippet below, we have to adjust the state definition. We need to be able to distinguish among states just by the passed url route

1) first level, a home state, will be used for path '/'
2) second level, a page state, won't be using the parent url, but will be defined as '/page' ... starting from the root.

Therefore ui-router will be able to decide which state to issue. Without the Absolute Routes (^) we would need combine parent and child: '//page' would be the proper route...

.state('home', {
    url: '/',
    templateUrl: 'home.html'
    ...
})
// here is the change, see the ^
.state('home.page', {
    url: '^/page',
    templateUrl: 'page.html'
    ...
})
.state('home.page.sub' , {
    url: '/page/sub',
    templateUrl: 'sub.html'
    ...
})

And now, each state could be accessed as

<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="home.page">- Page</a></li>
<li><a ui-sref="home.page.sub">- - Sub</a></li>

And its url will be:

#/          -- this is home
#/page      -- the page, in fact starting from root
#/page/sub

Working plunker: plunker

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered May 27, 2014 at 5:14

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Radim Köhler Over a year ago

Great to see that. The ui-router is ... awesome ;)

Collectives™ on Stack Overflow

AngularJS - Nested states

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related