如何加载嵌套3种状态的UI路由器UI视图模板?
问题描述:
我试图在我的应用程序中设计几个级别的路由和嵌套视图,以便根据路线替换部分应用程序。我能够加载登录页面,并且似乎也加载了布局视图,但是,我似乎无法使嵌套的<ui-view />
标记正常工作。有人可以告诉我我是如何做错的,或者如果在Angular中有一种更习惯的方式来完成相同的功能。如何加载嵌套3种状态的UI路由器UI视图模板?
app.js
(function() {
'use strict';
angular
.module('webApp', [
'ui.router',
])
.config(config)
.run(run);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider, ngClipProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl as login',
url: ''
})
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
.state('app.main.foo', {
url: '',
views: {
'[email protected]': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl as header'
},
'[email protected]': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl as sidebar'
},
'[email protected]': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl as main'
},
'subHeader': {
templateUrl: '<div><div ui-view="bottomHeader"></div></div>',
controller: 'SubHeaderCtrl',
controllerAs: 'subHeader'
},
'subSidebar': {
templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',
controller: 'SubSidebarCtrl',
controllerAs: 'subSidebar'
},
'bottomHeader': {templateUrl: '<div>FOO</div>'},
'bottomSidebar': {templateUrl: '<div>BAR</div>'}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})
.state('app.main.foo.bar', {
url: '/:id',
views: {
'[email protected]': {
templateUrl: 'partials/main.html'
},
'[email protected]': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl as mainOne'
},
'[email protected]': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl as mainTwo'
},
'[email protected]': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl as mainThree'
}
}
});
}
run.$inject = ['Auth'];
function run(Auth) {
Auth.stateChangeError();
Auth.loginSuccess();
Auth.loginFailure();
Auth.checkSession();
}
}());
的index.html
<!DOCTYPE html>
<html lang="en" ng-app="webApp">
<head>
<title>FooBar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<script src="/js/all.js"></script>
</head>
<body ui-view>
</body>
</html>
的layout.html
<div ui-view="header"></div>
<div class="app">
<div class="getting-started">
</div>
<div ui-view="sidebar"></div>
<div ui-view="main"></div>
</div>
了header.html
<header class="header">
<div ui-view="subHeader"></div>
<div class="trigger-button">
<button class="trigger">
<i class="icon-account"></i>
</button>
</div>
</header>
main.html中
<div>
<div ui-view="mainOne"></div>
<div ui-view="mainTwo"></div>
<div ui-view="mainThree"></div>
</div>
sidebar.html
<div>
<div ui-view="subSidebar"></div>
</div>
答
有a working plunker,显示您的方案
我做了一些变化,你的状态定义:
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
没有absulte命名,我们的目标我们的母公司
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
我们使用controller
和controllerAs
语法,相对的就足够了,更可读
.state('app.main.foo', {
url: '',
views: {
'header': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header',
},
'sidebar': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl',
controllerAs: 'sidebar',
},
'main': {
templateUrl: 'partials/main.html',
controller: 'MainCtrl',
controllerAs: 'main',
}
},
resolve: {
isAuthenticated: ['Auth', function(Auth) {
return Auth.isAuthenticated();
}]
}
})
主要状态是我们的父母,千万不要重新定义它
.state('app.main.foo.bar', {
url: '/:id',
views: {
'mainOne': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl',
controllerAs: 'mainOne',
},
'mainTwo': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl',
controllerAs: 'mainTwo',
},
'mainThreee': {
templateUrl: 'partials/main-three.html',
controller: 'MainThreeCtrl',
controllerAs: 'mainThree',
}
}
});
检查它here
嘿拉迪姆,感谢这么多详细的答案,plunker,我真的很感激。我仍在努力调整我的代码以使其工作。目前,成功登录后,路由不会从'/'根路由改变,我确定我错过了一些东西,然后再试一次。我拥有这些嵌套视图的原因是因为我希望在路由更改时创建/销毁嵌套在/:id级别的控制器以刷新给定路由的数据。你认为这是习惯用法吗? – evkline 2015-04-04 06:03:30
Radim,如果一个UI视图嵌套在主要的。#html部分中的一个中,它将如何从app.main.foo状态访问? – evkline 2015-04-04 06:15:47
据我了解... main - #。html是app.main.foo.bar内的视图 - 这意味着它不能从app.main.foo中访问。但它可以从'酒吧'访问。我扩展了plunker并检查超级子视图'mainThreeeSub @ app.main.foo.bar'',它是超级子** **栏**中的内容。希望能帮助到你。你可以做的最好的是玩和阅读:https://github.com/angular-ui/ui-router/blob/master/sample/app/contacts/contacts.js – 2015-04-04 06:49:16