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

Answer 1

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.

Answer 2

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 '^'.