Angular UI路由器 - 具有空Url的抽象父状态

Question

我试图在我的应用程序内设置多个嵌套状态.这是相关的代码.

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

    }

我面临的问题是国家和国家的过渡没有发生.
因此,如果我在#/之后没有任何内容打开我的页面,那么我什么也看不到.

如果我放入//cart网址,应用程序工作正常,这似乎是合乎逻辑的,//cart可能意味着第一个/是状态checkout,/cart第一个/是状态checkout.cart.

但问题是我希望状态checkout.cart加载到url /cart而不是//cart

Answer 1

解决方案非常简单.

当你使用抽象状态时.不要给它一个URL.

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

这应该可以解决问题.