【发布时间】：2014-08-20 13:39:48
【问题描述】：
我有这个 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 状态应包含三个子视图：标题、工具箱和内容。 “内容”视图是子状态 app.online 和 app.history 视图的容器。
- 进入 App 状态后，我希望用户在子状态 app.online 和 app.history 之间导航。 App 状态应该是抽象的，默认子状态应该是 app.online
-
网址：
/login[单视图登录状态]/[应用状态，应该重定向到 /online]/online[app.online 状态]/history[app.history state]
目前我可以成功加载/login，但是我不明白为什么去/online不显示app.tpl.html。
我错过了什么？
【问题讨论】：
标签： angularjs angular-ui-router