我正在研究基于 Angular 和 Angular UI Router 的复杂 UI 架构。我正在尝试在多个模块上定义具有嵌套 ui View 的路由。
这是我正在尝试做的事情:http://plnkr.co/edit/sxJOPQAgyEZfcYfUReGR?p=preview
这里的文件:
index.html
<body ng-app="app">
<h1 ui-view="title"></h1>
<div ui-view="sidebar1"></div>
<ul ui-view="sidebar2"></ul>
<div ui-view="content"></div>
</body>
应用程序.js
angular
.module('app', ['ui.router', 'page1'])
.config(['$locationProvider','$stateProvider', '$urlRouterProvider',
function ($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider.state({
name: "page1",
url: "/page1",
abstract: true
});
$urlRouterProvider.otherwise('/page1');
}]);
page1.js
angular
.module('page1', ['ui.router'])
.config(function ($stateProvider) {
$stateProvider.state({
name: 'page1.main',
views: {
title: {
template: "My Title"
},
sidebar1: {
template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>",
controller: function($scope) {
$scope.items = ['foo1', 'bar1'];
}
},
sidebar2: {
template: "<ul><li ng-repeat='item on items'></li></ul>",
controller: function($scope) {
$scope.items = ['foo2', 'bar2'];
}
},
content: {
template: "<div ng-repeat='one in many'>{{one}}</div>",
resolve: {
stuff: function () {
return [1,2,3,4,5]
}
},
controller: function($scope, stuff) {
$scope.many = stuff;
}
}
}
});
});
我错过了什么？
非常感谢。
最佳答案
我做了一些改动，让它运行 here .
首先，如文档中所定义:Abstract States ，必须定义抽象状态的子状态，即必须定义一些 url (这将帮助 ui-router 找出要使用的状态...抽象父级不可访问)
$stateProvider.state({ 名称:'page1.main'， 网址:'/主要'，
并且默认路由也更改为:
$urlRouterProvider.otherwise('/page1/main');
最重要的是使用正确的 ui-view 命名:
$stateProvider.state({
name: 'page1.main',
url : '/main',
views: {
"title@": {
template: "My Title"
},
"sidebar1@": {
template: "<ul><li ng-repeat='item on items'>{{item}}</li></ul>",
controller: function($scope) {
$scope.items = ['foo1', 'bar1'];
}
},
"sidebar2@": {
template: "<ul><li ng-repeat='item in items'>{{item}}</li></ul>",
controller: function($scope) {
$scope.items = ['foo2', 'bar2'];
}
},
"content@": {
...
我们可以看到， View 名称以@为后缀，这意味着:在顶级根目录中搜索它们，未命名的 View (通常是index.html)
在这里查看更多信息:View Names - Relative vs. Absolute Names
文档的一小段摘录:
///////////////////////////////////////////////////////
// Absolute Targeting using '@' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"info@contacts.detail" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail@contacts" : { }
// Absolutely targets the unnamed view in parent 'contacts' state.
// <div ui-view/> within contacts.html
"@contacts" : { }
工作 plunker .
编辑:如何在 url 中保留 /page1
由于 (几乎) 始终使用 ui-router，我们可以为我们提供这种行为。诀窍是，重置 url 评估以从根级别开始 - 即使对于子 (没有父 url 部分)。这可以通过一个神奇的“^”符号来完成
$stateProvider.state({
name: 'page1.main',
url : '^/page1',
views: {
....
这是文档:
- Absolute Routes (^)
(引用)If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
关于angularjs - 具有多个 ui-views 的多模块嵌套 ui-router，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24133995/