为一个

Question

我尝试使用angular-ui-router来模拟我的应用，以定义一个包含2种状态的网站：main和checkout。主要州应该有多个＆＃34;部分＆＃34;我试图定义为ui-view项目的标签。我无法说出我的路线设置有什么问题，但我觉得main.html没有加载。关于我的定义有什么错误的建议......我可以避免使用视图来使用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>

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