Override the parent url with child url in UI-router (Angular)

Question

This is the configuration i'm using for my ui-router:

.state('parent', {
    url: '/child1'
    controller: ParentController,
    abstract: true
})

.state('parent.child1', {
    url: ''
})

.state('parent.child2', {
    url: '/child2'
})

What I want to acheive ?

I want a /child1 url that I wanted to be default so I made the parent as abstract with child state url as 'empty'.

So I want that when user visits child2 state, the parent url gets replaced rather than appending it. How can i achieve that ?

zilj · Accepted Answer · 2016-08-03 13:57:50Z

5

If I understand you right, (please correct me if I'm wrong) you are looking to setup a routing service to achieve the following routes:

/, /child1 and /child2 and you want all states to be bound with ParentController

If that is correct you can achieve this with the following:

.state('parent', {
  url: '/',
  controller: ParentController,
})

.state('parent.child1', {
  url: '^/child1'
})

.state('parent.child2', {
  url: '^/child2'
})

For example if we were running https://localhost:3000 we could navigate as such:

parent or / would give us https://localhost:3000/

parent.child1 or /child1 would give us https://localhost:3000/child1

parent.child2 or /child2 would give us https://localhost:3000/child2

The ParentController would be invoked by all states.

answered Aug 3, 2016 at 13:57

zilj

6291 gold badge7 silver badges13 bronze badges

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

3 Comments

Rahul Gupta Over a year ago

I did the same pattern before but I didn't want the '/' to be visited since it has to have a child.. So making that abstract along with your solution solved it for me.. Thanks.. :) Also didn't have to put ^ in child states

zilj Over a year ago

Ah excellent, yes I've had these issues before. UIRouter is so flexible that sometimes there's too many ways to achieve the same result. Glad to help.

laughingpine Over a year ago

Just a sidebar here: the ^ denotes an absolute path. So if a person had two child states like: parent.child.grandChild, and used ^ the url would change from: /parent/child/grandChild/ to /grandChild/

Collectives™ on Stack Overflow

Override the parent url with child url in UI-router (Angular)

What I want to acheive ?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I want to acheive ?

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related