Angular UI Router - Abstract Parent State with empty Url

Question

Im trying to set up multiple nested states inside my app. This is the related code.

function configFn($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/cart");
        $stateProvider
            .state('checkout', {
                url: '/',
                templateUrl: 'app/checkout/views/checkout.container.html',
                controller: 'checkoutCntrl',
                abstract: true
            })
                .state('checkout.cart', {
                    data: { step: 1 },
                    url: '/cart',
                    views: {
                        "styles": {
                            templateUrl: 'app/checkout/views/checkout.styles.html',
                            controller: 'checkoutStylesCntrl'
                        },
                        "cart": {
                            templateUrl: 'app/checkout/views/checkout.cart.html',
                            controller: 'cartCntrl'
                        }
                    }
                })
                //.other states

    }

the problem that im facing is that the state and transition from states isn't happening.
So if i open my page with nothing after #/ then i get to see nothing.

If I put //cart in the url the app works fine which seems logical as //cart probably means that the first / is for state checkout and /cart after the first / is for the state checkout.cart.

But the problem is that i want state checkout.cart to load on the url /cart and not //cart

Okazari · Accepted Answer · 2015-05-29 09:35:42Z

12

The solution is pretty simple.

As you're using an abstract state. don't give it an URL.

        .state('checkout', {
            templateUrl: 'app/checkout/views/checkout.container.html',
            controller: 'checkoutCntrl',
            abstract: true
        })

This should do the trick.

answered May 29, 2015 at 9:35

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

Comments

Radim Köhler · Accepted Answer · 2015-05-29 09:21:27Z

3

One solution, is to start url evaluation without parent. We can do that with this sign ^

.state('checkout.cart', {
    data: { step: 1 },
    url: '^/cart',
    ...

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

answered May 29, 2015 at 9:21

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

3 Comments

Okazari Over a year ago

That should work. But in many usecases the common controller from the abstract state is really usefull (for common resolves for exemples). The template added by the abstract state has to be on each view too.

Radim Köhler Over a year ago

@Okazari The point is, that the absolute routing does not change parent/child hierarchy at all. Everything is in place, abstract parent does its job, e.g. provides some default views. And as I said.. this is just One solution...

Okazari Over a year ago

Didn't know that it keep everything in place. So it just basically don't use the other parents states URL ? I need to test that on my own to see how it work i guess. Thx for sharing.

Collectives™ on Stack Overflow

Angular UI Router - Abstract Parent State with empty Url

2 Answers 2

Comments

Absolute Routes (^)

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related