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

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

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

    }

我面临的问题是国家和国家的过渡没有发生.
因此,如果我在#/之后没有任何内容打开我的页面,那么我什么也看不到.
如果我把//推车放在网址中,应用程序工作正常,这似乎是合乎逻辑的//推车可能意味着第一个/用于状态检出和/推车在第一个/用于状态checkout.cart之后.
但问题是我希望状态checkout.cart加载到url / cart而不是// cart

最佳答案
解决方案非常简单.

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

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

这应该可以解决问题.

转载注明原文:javascript – Angular UI路由器 – 具有空Url的抽象父状态 - 代码日志