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 Nate Abele · Accepted Answer · 2013-09-26T11:51:59

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.

AngularJS UI-Router multiple states with same URL

1 Answers