如何加载嵌套 3 个状态深的 UI-router ui-view 模板? | 个状态深的
本文介绍了如何加载嵌套 3 个状态深的 UI-router ui-view 模板?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我正在尝试在我的应用程序中设计多个级别的路由和嵌套视图，以便根据路由替换应用程序的某些部分.我能够加载登录页面，而且布局视图似乎也加载了，但是，我似乎无法让嵌套的 <ui-view/> 标签工作.有人可以告诉我我是怎么做错的，或者在 Angular 中是否有更惯用的方法来完成相同的功能.
app.js
(function() {'使用严格';有角的.module('webApp', ['ui.router',]).config(配置).跑跑);config.$inject = ['$stateProvider', '$urlRouterProvider'];功能配置($stateProvider，$urlRouterProvider，ngClipProvider){$urlRouterProvider.otherwise('/');$stateProvider.state('应用程序', {摘要:真实，网址:'/'，模板:'<ui-view/>'}).state('app.login', {templateUrl: 'views/login.html',控制器:'LoginCtrl 作为登录'，网址:''}).state('app.main', {网址:'房间'，templateUrl: 'views/layout.html'}).state('app.main.foo', {网址:'',意见:{'[email protected] ':{templateUrl: 'partials/header.html',控制器:'HeaderCtrl 作为标题'},'[email protected] ':{templateUrl: 'partials/sidebar.html',控制器:'SidebarCtrl 作为侧边栏'},'[email protected] ':{templateUrl: 'partials/main.html',控制器:'MainCtrl 作为主'},'子标题':{templateUrl: '<div><div ui-view="bottomHeader"></div></div>',控制器:'SubHeaderCtrl'，控制器为:'子标题'},'子侧边栏':{templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',控制器:'SubSidebarCtrl'，controllerAs: 'subSidebar'},'bottomHeader': {templateUrl: '<div>FOO</div>'},'bottomSidebar': {templateUrl: '<div>BAR</div>'}},解决: {isAuthenticated: ['Auth', function(Auth) {返回 Auth.isAuthenticated();}]}}).state('app.main.foo.bar', {网址: '/:id',意见:{'主要的@': {templateUrl: 'partials/main.html'},'mainOne@':{templateUrl: 'partials/main-one.html',控制器:'MainOneCtrl 作为 mainOne'},'mainTwo@':{templateUrl: 'partials/main-two.html',控制器:'MainTwoCtrl 作为 mainTwo'},'mainThreee@':{templateUrl: 'partials/main-three.html',控制器:'MainThreeCtrl 作为 mainThree'}}});}run.$inject = ['Auth'];功能运行(身份验证){Auth.stateChangeError();Auth.loginSuccess();Auth.loginFailure();Auth.checkSession();}}());index.html
<html lang="en" ng-app="webApp"><头><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><body ui-view>layout.html
<div ui-view="header"></div><div class="app"><div class="入门"><div ui-view="sidebar"></div><div ui-view="main"></div>
header.html
<div ui-view="subHeader"></div><div class="trigger-button"><button class="trigger"><i class="icon-account"></i></标题>
main.html
<div ui-view="mainOne"></div><div ui-view="mainTwo"></div><div ui-view="mainThree"></div>
sidebar.html
<div ui-view="subSidebar"></div>
解决方案
有一个工作plunker ，展示你的场景
我对您的状态定义做了一些更改:
$stateProvider.state('应用程序', {摘要:真实，网址:'/'，模板:'<ui-view/>'}).state('app.login', {templateUrl: 'views/login.html',控制器:'登录Ctrl'，controllerAs: '登录',网址:''})我们正在使用 controller 和 controllerAs 语法
.state('app.main', {网址:'房间'，templateUrl: 'views/layout.html'})没有绝对的命名，我们针对我们的父母，亲戚就足够了，更具可读性
.state('app.main.foo', {网址:'',意见:{'标题':{templateUrl: 'partials/header.html',控制器:'HeaderCtrl'，controllerAs: 'header',},'侧边栏':{templateUrl: 'partials/sidebar.html',控制器:'侧边栏Ctrl'，controllerAs: '侧边栏',},'主要的': {templateUrl: 'partials/main.html',控制器:'MainCtrl'，控制器为:'主要'，}},解决: {isAuthenticated: ['Auth', function(Auth) {返回 Auth.isAuthenticated();}]}})main
.state('app.main.foo.bar', {网址: '/:id',意见:{'mainOne':{templateUrl: 'partials/main-one.html',控制器:'MainOneCtrl'，controllerAs: 'mainOne',},'主二':{templateUrl: 'partials/main-two.html',控制器:'MainTwoCtrl'，controllerAs: 'mainTwo',},'主三':{templateUrl: 'partials/main-three.html',控制器:'MainThreeCtrl'，controllerAs: 'mainThree',}}});在此处
检查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. 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.
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: {
'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
<!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>
解决方案
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
.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('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',
}
}
});
Check it here
这篇关于如何加载嵌套 3 个状态深的 UI-router ui-view 模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-26 00:36