Using multiple regexp parameter for Angular UI Router

Question

I'm using AnglarJs and Angular UI Router for my project. I'm using parameters for my route such as:

url: '/content/:categoryId/:categoryType'

But I got problem when using url:

url: '/content/detail/:contentId'

It seem Angular UI Router can not recognize the difference of these 2. Then I decide to use regexp parameter for all of them

url: '/content/{categoryId:int}/{categoryType:int}'
url: '/content/detail/{contentId:int}'

The second url is ok but Angular UI Router can not recognize the first one when I using ui-sref:

<a ui-sref="firstUrl({categoryId: 1, categoryType: 2})">Anchor</a>

Was Angular UI router support just one regexp parameter?

Usually it's a good idea to start with the 'static' ones and the dynamic urls later to avoid conflicts. Try putting the 'detail' one first. — djangonaut
– djangonaut, Commented Mar 11, 2015 at 3:58
Thank you very much! By rearrange order of routes, I've solve my problem. — Son Tran
– Son Tran, Commented Mar 11, 2015 at 4:22

Radim Köhler · Accepted Answer · 2015-03-11 05:48:57Z

1

The issue here is in the way how UI-Router is finding/resolving state for url. It uses:

And that is in fact the issue, because first url pattern:

url: '/content/{categoryId:int}/{categoryType:int}'

is absolutely suitable for the url provided for this one

url: '/content/detail/{contentId:int}'

Solution in these cases is relatively simple. Change the order of state definitions. The more precise should go first, the more dynamic second

answered Mar 11, 2015 at 5:48

Radim Köhler

124k48 gold badges243 silver badges341 bronze badges

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

1 Answer 1