UI Router conflicting when using similar URL pattern

Question

I have the following 2 states defined in my app.config:

state('product-details', {
    url: '/products/:productId',
    templateUrl: '/pages/product-details/product-details.tmpl.html',
    controller: 'ProductDetailsController'
})

and

state('product-register', {
    url: '/products/register',
    templateUrl: '/pages/product-register/product-register.tmpl.html',
    controller: 'ProductRegisterController'
})

The problem I am facing is since both their URL patterns are similar, when I try to navigate to product-register state, the 'register' is interpreted by angularui-router as a productId and redirects me to product-details state instead.

After going through some similar questions on SO, I thought I would filter these URLs using regexes as explained here. But when I tried this, although the regex was matching properly in isolation, the state refused to change.

Then again after doing a bit of research I decided to merge the two states like this:

state('product-details', {
     url: '/products/:param',
    templateUrl: ['$stateParams', function($stateParams) {
        if($stateParams.param === 'register') {
            return '/pages/product-register/product-register.tmpl.html';
        } else {
            return '/pages/product-details/product-details.tmpl.html';
        }
    }],
    controller: ['$stateParams', function($stateParams) {
        if($stateParams.param === 'register') {
            return 'ProductRegisterController';
        } else {
            return 'ProductDetailsController';
        }
    }]
})

This also does not seem to work as expected. What am I missing? Isn't this a very normal thing you would have to do?

Can't you just describe your route as url: '/products/detail/:productId'? — AlexHv
– AlexHv, Commented Nov 9, 2015 at 9:21

Partha Sarathi Ghosh · Accepted Answer · 2015-12-31 10:40:14Z

3

Try to move 'product-register' state before 'product-details' state.

Actually you need to differentiate your state URL pattern or else angular will fire the first match it will find.

edited Dec 31, 2015 at 10:40

answered Nov 9, 2015 at 9:27

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

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

1 Comment

artdias90 Over a year ago

Thanks! Funny that switching the order didn't pass the problem to the other state. Now both just work

David Spence · Accepted Answer · 2015-11-09 09:29:38Z

1

You should be able to specify types for your parameters to match only certain states.

In your case you could use:

url: '/products/{productId:int}'

There are lots of other examples on the ui router page: https://github.com/angular-ui/ui-router/wiki/URL-Routing

edited Nov 9, 2015 at 9:29

answered Nov 9, 2015 at 9:25

David Spence

8,0893 gold badges42 silver badges68 bronze badges

4 Comments

shyam Over a year ago

This seems feasible, however my ids are Strings

David Spence Over a year ago

Is there any defined pattern for your ids that you could use a regex for? Otherwise it might be difficult without differentiating urls more :/

Hitmands Over a year ago

You need to have uniq identifiers for states, one way, if you have some pattern could be using regular expressions (Ui.Router has a basic support on it)... Howewer, the best solution is having unique identifiers...

Mackelito Over a year ago

What if we can´t control that? Im my case I have no way of knowing if "/products" is a category or a cms page :/

Collectives™ on Stack Overflow

UI Router conflicting when using similar URL pattern

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related