[英]How do I load UI-router ui-view templates that are nested 3 states deep?
I am attempting to design the routing and nested views in my app several levels deep in order to replace parts of the app based on a route. 我试图在我的应用程序中深入设计路由和嵌套视图,以基于路由替换应用程序的某些部分。 I'm able to load the login page, and it seems the layout view loads as well, however, I can't seem to get the nested
<ui-view />
tags to work. 我能够加载登录页面,并且似乎也加载了布局视图,但是,我似乎无法使嵌套的
<ui-view />
标记起作用。 Can someone please tell me how I'm doing this wrong, or if there is a more idiomatic way in Angular to accomplish the same functionality. 有人可以告诉我我是怎么做的,或者Angular中是否有更惯用的方式来完成相同的功能。
app.js 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: {
'header@app.main': {
templateUrl: 'partials/header.html',
controller: 'HeaderCtrl as header'
},
'sidebar@app.main': {
templateUrl: 'partials/sidebar.html',
controller: 'SidebarCtrl as sidebar'
},
'main@app.main': {
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: {
'main@': {
templateUrl: 'partials/main.html'
},
'mainOne@': {
templateUrl: 'partials/main-one.html',
controller: 'MainOneCtrl as mainOne'
},
'mainTwo@': {
templateUrl: 'partials/main-two.html',
controller: 'MainTwoCtrl as mainTwo'
},
'mainThreee@': {
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 的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 的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.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 main.html中
<div>
<div ui-view="mainOne"></div>
<div ui-view="mainTwo"></div>
<div ui-view="mainThree"></div>
</div>
sidebar.html sidebar.html
<div>
<div ui-view="subSidebar"></div>
</div>
There is a working plunker , showing your scenario 有一个正在工作的小伙子 ,展示您的情况
I've made few changes in your state definition: 我对您的状态定义进行了一些更改:
$stateProvider
.state('app', {
abstract: true,
url: '/',
template: '<ui-view/>'
})
.state('app.login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login',
url: ''
})
We are using controller
and controllerAs
syntax 我们正在使用
controller
和controllerAs
语法
.state('app.main', {
url: 'room',
templateUrl: 'views/layout.html'
})
No absulte naming, we target our parent, relative is enough, more readable 不用粗俗的命名,我们以父母为对象,相对就足够了,更易读
.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();
}]
}
})
main state is in our parent, do not redefine it 主要 状态在我们的父级中,请勿重新定义
.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',
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.