I want to dynamically apply parameters in ui router
I have some parameters for the category url like /: rootcategory /: sub /: sub which is dynamic and for the product I have to route like / product /: productname /: producturl ..... It works well using ui -sref, but when I go to the url and update it the config gets messed up and in both cases the url sent me to the category page.
.state('category3',{
url: '/:name1/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Updated answer:
The problem was that the category also validates product pages, the category status url parameter ( /:name1/:name2/:name3
) will accept ( /product/disc/test
), because name1 has no special validation to restrict the keyword products
not passing. So I suggest checking the regex that will limit the keyword product so that this issue doesn't occur.
The regex for the category will look like
url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',
If the name1 parameter starts with product, the regex validation will fail and no category state will be entered, so it will transition to product state, which is what we want.
.state('category3',{
url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Previous answer:
Since you are passing "products / hplaptop5050 / hp-laptop" it accepts the products parameter as a category, so it goes into a category instead, you need a static variable or even a unique input variable so it doesn't bother if I can suggest something like "/ {categoryid: int} /: name1 /: name2 /: name3" or "/ 0 /: name1 /: name2 /: name3" , so we have a clear difference from the product and category pages.
.state('category3',{
url: '/{categoryid:int}/:name1/:name2/:name3',
templateUrl: 'template/product/productsgridpage.html',
controller: 'categoryCtrl',
parent: 'productpagelayout'
})
.state('product', {
url: '/product/:name1/:name2',
templateUrl: 'template/product/detailpage.html',
controller: 'productCtrl',
parent: 'productpagelayout',
})
Please read the section state declaration page from the UI router docs, you can think of a different approach if needed.
Ref: ui router docs
source to share