javascript - 两种状态，其中 View 定义为一种状态

Question

我正在尝试使用 angular-ui-router 模块化我的应用程序来定义具有 2 个状态的网站:主要状态和结帐状态。主要状态应该有多个“部分”标签，我试图将其定义为 ui-view 项目。我不知道我的路线设置有什么问题，但我感觉 main.html 没有被加载。关于我的定义有什么问题的任何建议...我可以避免使用部分 View 而只使用 ng-include...

routes.js

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/main');
    $stateProvider
        .state('main', {
            url: '/main',
            controller: 'MainCtrl',
            templateUrl: 'templates/main.html',
            views:{
                'home': {
                    templateUrl: 'templates/main.home.html'
                },
                'about': {
                    templateUrl: 'templates/main.about.html'
                },
                'services': {
                    templateUrl: 'templates/main.services.html'
                },
                'shop': {
                    templateUrl: 'templates/main.shop.html',
                    controller: 'ShopCtrl'
                }
            }
        })
        .state('checkout', {
            url: '/checkout',
            templateUrl: 'templates/checkout.html',
            controller: 'CheckoutCtrl'
});

index.html

<div ui-view id="app-ui-view"></div>

templates/main.html

<section ui-view="home" id="home"></section>
<section ui-view="about" id="about"></section>
<section ui-view="services" id="services"></section>
<section ui-view="shop" id="shop"></section>

基本上页面会加载，但主要或结帐状态不会加载。我嵌套的东西怎么错了？

Answer 1

通过不指定父级，您可以将两种状态映射到 index.html 中的默认 ui-view。因此，当访问主状态时，不会有任何模板链接到默认的 ui-view，这是现有 html 中唯一存在的模板。

所以主状态应该有这样的定义:

.state('main', {
            url: '/main',
            views:{
                '': {
                    controller: 'MainCtrl',
                    templateUrl: 'templates/main.html',
                },
                'home@main': {
                    templateUrl: 'templates/main.home.html'
                },
                'about@main': {
                    templateUrl: 'templates/main.about.html'
                },
                'services@main': {
                    templateUrl: 'templates/main.services.html'
                },
                'shop@main': {
                    templateUrl: 'templates/main.shop.html',
                    controller: 'ShopCtrl'
                }
            }
        })