AngularJS UI-Router multiple states with the same url

Question

I have a multi-page form created using AngularJS and AngularUI UI Router. Each step has its own URL (/ step1 → / step2 → / step3). In step 2, the form offers the user a choice between two options. Depending on which option is selected, I want you 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 / step 3.

I tried a lot of efforts to get this to work, including having two alternative states, one as a child of the other (shown below), resulting in only the parent being displayed (step-3-a) and having an abstract parent element, step (step 3) with a URL address, and then two child steps (step-3-a and step-3-b) and routing using the onEnter event and transition. Both of them could not display the content correctly (the latter pushed the user into / user / userId).

It should be possible to get directions on this estate, but I can't get it to work. Any help or advice would be greatly appreciated.

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: { ... } }) 

Answer 1

You are doing the inheritance wrong. Parents and children should be separated by dots. 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: { ... } }) 

Thus, both child states will display the URL of their parent.