我已经尝试在plinker上做一些工作,但看起来我显然不会理解概念.我已经阅读了一个嵌套的ui-vew教程,但是他们很简单地创建一个index.html并在那里放置多个ui-view,但我需要多个.html文件.
test.html只是一个文件,其中包含一些应显示在主标题下的文本
index.html看起来像这样
<html ng-app="MyApp">
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Master header
</h4>
<div ui-view></div>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>
</body>
</html>
这是app.html
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Sub master header
</h4>
<div ui-view></div>
</body>
和app.js写在伪代码上,显示我希望它如何工作,因为我显然不知道如何使它工作
angular.module('MyApp',[
'ui.router'
])
.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
templateUrl: 'index.html',controller: 'IndexCtrl'
})
.state('index.test',{
url: '/',templateUrl: 'test.html',controller: 'TestCtrl'
})
.state('app',{
templateUrl: 'app.html',controller: 'AppController'
})
.state('app.test2',{
url: '/test2',templateUrl: 'test2.html',controller: 'Test2Controller'
})
})
test2.html只是一个文本.
解决方法
$stateProvider
.state('index',{
url: '/',views: {
'@' : {
templateUrl: 'layout.html',controller: 'IndexCtrl'
},'top@index' : { templateUrl: 'tpl.top.html',},'left@index' : { templateUrl: 'tpl.left.html','main@index' : { templateUrl: 'tpl.main.html',})
.state('index.list',{
url: '/list',templateUrl: 'list.html',controller: 'ListCtrl'
})
.state('index.list.detail',{
url: '/:id',views: {
'detail@index' : {
templateUrl: 'detail.html',controller: 'DetailCtrl'
},})
这是索引核心模板layout.html：
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
它是如何工作的？
I.列表视图
我们可以看到tpl.top.html的内容
<div> This is a tpl.top.html<br /> <a ui-sref="index">index</a> <a ui-sref="index.list">index.list</a><br /> </div>
它确实有一些导航到索引或列表视图.列表视图将被注入到tpl.left.html中,如下所示：
<div> This is a tpl.left.html <h4>place for list</h4> <div ui-view=""></div> </div>
因为视图目标是未命名的< div ui-view =“”>< / div> ;,我们可以定义列表$state,如下所示：
.state('index.list',controller: 'ListCtrl'
})
我们可以看到,我们的目标是索引(根)状态视图锚,它是未命名的.但是对于细节,我们使用不同的技术：
II.详细视图
这是tpl.main.html的内容：
<div> This is a tpl.main.html <h4>place for detail</h4> <div ui-view="detail"></div> </div>
在这种情况下,视图的锚点名为：ui-view =“detail”,这就是为什么我们必须像这样定义详细状态：
.state('index.list.detail',})
我们可以看到,因为父视图不是我们状态的目标(祖父索引是目标),我们必须使用aboslute命名：’detail @ index’
III. View Names – Relative vs. Absolute Names
来自doc的小小的引用：
Behind the scenes,every view gets assigned an absolute name that follows a scheme of
viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute Syntax.
摘要：
所以,这个例子是关于它的 – 几乎所有ui路由器的基本功能.我们在这里展示了如何使用嵌套,视图命名(绝对/相对)以及如何为一个状态使用多个视图(索引状态定义)
请观察所有动作here(点击顶部的inex.html,然后尝试选择一些细节)
