ui-router 中的多个 ui-view html 文件 [英] multiple ui-view html files in ui-router
问题描述
是否可以使用 ui-view 使用 2 个或更多 html 文件制作某些内容?我需要它是这样的:
我尝试在 plinker 上做一些工作，但看起来我很清楚不要理解概念.我读过一个嵌套的 ui-vew 教程，但他们简单地制作了一个 index.html 并在那里放置了多个 ui-view，但我需要多个 .html 文件.
test.html 只是一个包含一些文本的文件，应该显示在主标题下
index.html 看起来像这样
<头><link href="stylesheets/style.css" rel="stylesheet"><身体><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></html>这是 app.html
<link href="stylesheets/style.css" rel="stylesheet"><身体><h4>这应该是 Sub master header<div ui-view></div>app.js 是用伪代码编写的，显示了我希望它如何工作，因为我显然不知道如何让它工作
angular.module('MyApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/');$stateProvider.state('索引', {templateUrl: 'index.html',控制器:'IndexCtrl'}).state('index.test', {网址:'/'，templateUrl: 'test.html',控制器:'TestCtrl'}).state('应用程序', {templateUrl: 'app.html',控制器:'AppController'}).state('app.test2', {网址:'/test2'，templateUrl: 'test2.html',控制器:'Test2Controller'})})test2.html 只是一个文本.
我不确定我是否 100% 理解你的目标，但有更新 plunker，展示了我们如何使用嵌套视图.
首先，有一个 $state 定义显示嵌套:
$stateProvider.state('索引', {网址:'/'，意见:{'@':{templateUrl: 'layout.html',控制器:'IndexCtrl'},'top@index' : { templateUrl: 'tpl.top.html',},'left@index' : { templateUrl: 'tpl.left.html',},'main@index' : { templateUrl: 'tpl.main.html',},},}).state('index.list', {网址:'/列表'，templateUrl: 'list.html',控制器:'ListCtrl'}).state('index.list.detail', {网址: '/:id',意见:{'细节@索引':{templateUrl: 'detail.html',控制器:'DetailCtrl'},},})这是index核心模板layout.html:
<section class="top"><div ui-view="top"></div></节><section class="middle"><section class="left"><div ui-view="left"></div></节><div ui-view="main"></div></节></节> 它是如何工作的?
我.列表视图
我们可以看到tpl.top.html
这是一个 tpl.top.html<br/><a ui-sref="index">index</a><a ui-sref="index.list">index.list</a><br/>确实有一些导航到索引或列表视图.列表视图将被注入到 tpl.left.html 中，如下所示:
这是一个 tpl.left.html<h4>列表位置</h4><div ui-view=""></div>因为视图目标未命名<div ui-view=""></div>，我们可以这样定义list $state:
.state('index.list', {网址:'/列表'，templateUrl: 'list.html',控制器:'ListCtrl'})我们可以看到，我们的目标是未命名的索引(根)状态视图锚点.但对于细节，我们确实使用了不同的技术:
二.详细视图
这是tpl.main.html的内容:
这是一个 tpl.main.html<h4>详情的地方</h4><div ui-view="detail"></div>在这种情况下，视图的锚点被命名为:ui-view="detail"，这就是为什么我们必须像这样定义 detail 状态:
.state('index.list.detail', {网址: '/:id',意见:{'细节@索引':{templateUrl: 'detail.html',控制器:'DetailCtrl'},},})我们可以看到，因为父视图不是我们状态的目标(大父索引是目标)我们必须使用绝对命名:'detail@index'
来自文档的小引用:
<块引用>在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.
总结:
所以，这个例子就是关于它的——关于 ui-router 的几乎所有基本功能.我们在这里展示了如何使用嵌套、视图命名(绝对/相对)以及如何将多个视图用于一种状态(索引状态定义)
请注意此处 (点击顶部，然后尝试选择一些细节)
Is it possible to make something using 2 or more html files using ui-view? I need it to be something like this :
I've tryed to do something working on plinker, but looks like I clearly don't uderstand concepts. I've read a nested ui-vew tutorial but they simple make a single index.html and place multiple ui-view there, but I need multiple .html files.
test.html is just a file with some text that should be displayed under master header
index.html looks like this
<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>
this is 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>
and app.js is written on pseudo code showing how I want it to work, because I clearly have no idea how to make it work
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 is just a text.
I am not sure if I do understand your goal 100%, but there is updated plunker, showing how we can work with nested views.
Firstly, there is a $state defintion showing the nesting:
$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'
},
},
})
And here is the index core template 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>
And how it works?
I. List View
we can see the content of the 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>
which does have some navigation to the index or list view. The list view, will be injected into the tpl.left.html, which looks like this:
<div>
This is a tpl.left.html
<h4>place for list</h4>
<div ui-view=""></div>
</div>
Becuase the view target is unnamed <div ui-view=""></div>, we can defin list $state like this:
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
we can see, that we target the index (root) state view anchor, which is unnamed. But for a detail we do use different technique:
II. Detail View
This is the content of the tpl.main.html:
<div>
This is a tpl.main.html
<h4>place for detail</h4>
<div ui-view="detail"></div>
</div>
In this case, the anchor for a view is named: ui-view="detail", that is why we have to define that detail state like this:
.state('index.list.detail', {
url: '/:id',
views: {
'detail@index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
})
We can see, that because the parent view is not the target of our state (the grand parent index is the target) we have to use aboslute naming: 'detail@index'
III. View Names - Relative vs. Absolute Names
small cite from 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.
SUMMARY:
So, this example is about it - about almost all essential features of the ui-router. We showed here how to use nesting, view naming (absolute/relative) and also how to use multiple views for one state (index state definition)
Please, observe that all in action here (click the inex.html in the top section, then try to select some details)
这篇关于ui-router 中的多个 ui-view html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
