AngularJS UI-Router multiple states with same URL

Question

I have a multipage form made using AngularJS and the AngularUI router ui-router. Each step has it's own URL (/step1 -> /step2 -> /step3). At step 2 the form offers the user a choice between 2 options. Depending on which option is selected I want to be able to send the user to one of two states, but no matter which of the two states is selected I want the URL to change to /step3.

I have tried numerous efforts to get this to work including having the two alternative states one as a child of the other (shown below) resulting in only the parent (step-3-a) being shown, and having an abstract parent step (step-3) with the url and then two child steps (step-3-a, and step-3-b) and routing using the onEnter event and a transition. Both of these failed to display the content correctly (the latter kicked the user out to /user/userId).

It must be possible to route in this manor but I can't seem to make it work. Any help or advice would be gratefully received.

Thanks

$stateProvider
    .state('form', {
      abstract: true,
      views: {
        ...
      }
    })
    .state('user-form', {
      url: '/user/:userId',
      parent: 'form',
      abstract: true,
      views: {
        ...
      }
    })
    .state('step-1', {
      parent: 'user-form',
      url: '/step1',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-2', {
      parent: 'user-form',
      url: '/step2',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-a', {
      parent: 'user-form',
      url: '/step3',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-b', {
      parent: 'step-3-a',
      data: {
        ...
      },
      views: {
        ...
      }
    })

Nate Abele · Accepted Answer · 2013-09-26 11:51:59Z

5

You're doing inheritance wrong. Parents and children should be dot-separated. Your configuration should look like this:

.state('step-3', {
  abstract: true,
  url: '/step3',
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.a', {
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.b', {
  data: {
    ...
  },
  views: {
    ...
  }
})

This way, both child states will reflect the URL of their parent.

answered Sep 26, 2013 at 11:51

Nate Abele

5,76034 silver badges28 bronze badges

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

2 Comments

AndrewD Over a year ago

According to: github.com/angular-ui/ui-router/wiki/… you can use either dot notation (like you have used) or the parent property (like I have used). Although I do admit in the long term I probably will be using dot notation as it's easier to read.

Nate Abele Over a year ago

Yup, that's what the docs say, but in the actual code, the other forms aren't currently well-supported.

Collectives™ on Stack Overflow

AngularJS UI-Router multiple states with same URL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related