ui-router中的多个ui-view html文件
use*_*123 7 html javascript node.js angularjs angular-ui-router
是否可以使用ui-view使用2个或更多html文件制作内容？我需要它是这样的:
我试图在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只是一个文本.
Rad*_*ler 11
我不确定我是否100%理解你的目标,但有更新的plunker,显示我们如何使用嵌套视图.
首先,有一个$ state定义显示嵌套:
$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', {
url: '/list',
templateUrl: 'list.html',
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', {
url: '/:id',
views: {
'detail@index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
})
我们可以看到,因为父视图不是我们状态的目标(祖父索引是目标),我们必须使用aboslute命名:'detail@index'
III.查看名称 - 相对名称与绝对名称
来自doc的小小的引用:
在幕后,为每个视图分配一个遵循方案的绝对名称
viewname@statename,其中viewname是视图指令中使用的名称,状态名称是状态的绝对名称,例如contact.item.您还可以选择以绝对语法编写视图名称.
总结:
所以,这个例子是关于它的 - 几乎所有的基本特征ui-router.我们在这里展示了如何使用嵌套,查看命名(绝对/相对)以及如何将多个视图用于一个状态(索引状态定义)
请注意这里的 所有操作(单击顶部的inex.html,然后尝试选择一些细节)