Javascript 两个状态，其中一个状态定义了视图

我正在尝试使用angular ui router将我的应用程序模块化，以定义一个具有两种状态的网站：主状态和签出状态。主状态应该有多个“section”标记，我试图将其定义为ui视图项。我不知道我的路由设置有什么问题，但我感觉main.html没有被加载。有没有关于我的定义有什么问题的建议。。。我可以避免使用secions视图，而只使用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>

<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>

模板/main.html

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

<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>

---

页面基本上会加载，但主或签出状态不会加载。嵌套怎么会出错？

通过不指定父级，可以将这两种状态映射到

index.html

中的默认ui视图。因此，当访问主状态时，不会有任何模板链接到默认的ui视图，这是现有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'
                }
            }
        })

---

通过不指定父级，您可以将这两个状态映射到

index.html

中的默认ui视图。因此，当访问主状态时，不会有任何模板链接到默认的ui视图，这是现有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'
                }
            }
        })

---

谢谢你的回复。这似乎只是呈现第一个视图“主页”，而不是主页上的所有视图。这里是plunker，它证明了这是解决方案，感谢您的回复。这似乎只是将第一个视图呈现为“主页”，而不是主页上的所有视图。这是证明这是解决方案的plunker