CODEWITHSUNDEEP
angularjsangular-uiangular-ui-router
aditya
aditya

Reputation: 996

How can I override route in AngularUI Router?

Using AngularUI Router can I have a way in which more than one state matches the requested URL but the one which satisfies first kicks in.

I have 2 states catalog.category for catalog page and catalog.product for product page.

Category State: 

        $stateProvider
            .state('catalog.category', {
                url: '/shop/category/{slug:.*}',
                controller: 'CategoryCtrl'
            });

Product State:

        $stateProvider
            .state('catalog.product', {
                url: "/shop/category/{categorySlug:.*}/product/{productSlug}",
                controller: 'ProductCtrl',
            });

How do I get /shop/category/men/apparel match catalog.category state and /shop/category/men/apparel/product/black-tshirt match catalog.product state?

Upvotes: 1

Views: 1455

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123901

There is a working plunker. What we have to do, is to define more precise (the second state) as the first. If it will be evaluated against the regex (url) ... it will be found first:

.state('catalog.product', {
    url: "/shop/category/{categorySlug:.*}/product/{productSlug}",
    controller: 'ProductCtrl',
    ...
  })
.state('catalog.catagory', {
    url: '/shop/category/{slug:.*}',
    controller: 'CategoryCtrl',
    ...
  })

Check it here

Upvotes: 1

Ben Diamant
Ben Diamant

Reputation: 6206

What about nested states?

        $stateProvider
        .state('catalog.category', {
            url: '/shop/category/{slug:.*}',
            controller: 'CategoryCtrl'
        });

        $stateProvider
        .state('catalog.category.product', {
            url: "/product/{productSlug}",
            controller: 'ProductCtrl',
        });

Upvotes: 0

Related Questions