Question

我有这个index.html：

<body ng-controller="MainCtrl">
    <div class="app" ui-view>
          <h1>This should be visible while the app loads</h1>
    </div>
</body>

我的配置代码：

angular.module('app').config(function ($locationProvider, $stateProvider) {
$locationProvider.html5Mode(true);
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: '/res/login/login.tpl.html'
    })
    .state('app', {
        url: '/',
        templateUrl: '/res/app/app.tpl.html',
        controller: 'AppCtrl',
        abstract: true,
        views:{
            header: {
                templateUrl: '/res/app/header.tpl.html'
            },
            toolbox: {
                templateUrl: '/res/app/toolbox.tpl.html'
            }
        }
    })
    .state('app.online', {
        url: 'online',
        templateUrl: '/res/app/online/online.tpl.html'
    })
    .state('app.history', {
        url: 'history',
        templateUrl: '/res/app/history/history.tpl.html'
    });
})    
.controller('MainCtrl', ['$state', function ($state) {

}])
.controller('LoginCtrl', [function () {

}])
.controller('AppCtrl', [function () {

}])
.controller('HeaderCtrl', [function () {

}])
.controller('SidebarCtrl', [function () {

}]);

app.tpl.html：

<div class="header" ui-view="header"></div>
<div class="content">
    <div class="toolbox" ui-view="toolbox"></div>
    <div class="content" ui-view>
         Place for the states - "app.online" and "app.history"
    </div>
</div>

我希望发生以下情况：

它应该有两个主要状态 - 登录和应用程序。
App状态应包含三个子视图：标题，工具箱和内容。＆＃34;内容＆＃34; view是子状态app.online和app.history的视图的容器。
进入App状态后，我希望用户在子状态app.online和app.history之间导航。 App状态应该是抽象的，默认子状态应该是app.online
网址：

/login [单一视图的登录状态]

/ [应用状态，应该重定向到/在线]

/online [app.online state]

/history [app.history state]

目前，我可以成功加载/login，但我不明白为什么要/online显示app.tpl.html。

我错过了什么？

Answer 1

主要的变化应该是这种状态定义：

.state('app', {
    url: '/',
    abstract: true,
    views:{
        '': {
            templateUrl: '/res/app/app.tpl.html',
            controller: 'AppCtrl',
        },
        'header@app': {
            templateUrl: '/res/app/header.tpl.html'
        },
        'toolbox@app': {
            templateUrl: '/res/app/toolbox.tpl.html'
        }
    }
})

这样我们确实将app.tpl.html传递给index.html（root）中未命名的ui-view=""，我们以该视图的绝对命名为目标，并注入其他视图：

'header@app': {
    templateUrl: '/res/app/header.tpl.html'
},
'toolbox@app': {
    templateUrl: '/res/app/toolbox.tpl.html'
}

检查： View Names - Relative vs. Absolute Names 引用：

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

Angular UI Router - 嵌套状态和视图

1 个答案: