在UI路由器多个UI-查看HTML文件 [英] multiple ui-view html files in ui-router
问题描述
是否有可能要使用的用户界面视图使用2个或多个HTML文件的东西吗？我需要它是这样的：
Is it possible to make something using 2 or more html files using ui-view? I need it to be something like this :
我tryed做一些在 plinker ，但看起来工作像我显然不uderstand概念。我读过一个嵌套的UI VEW教程，但他们简单做一个index.html，然后将多个UI的观点，但我需要多个.html文件。
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的仅仅是一个应该主标题下显示一些文本文件
test.html is just a file with some text that should be displayed under master header
index.html的看起来像这样
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>
这是app.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>
和app.js写伪code显示我多么希望它的工作，因为我清楚地不知道如何使它工作
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只是一个文本。
test2.html is just a text.
推荐答案
我不知道如果我明白你的目标100％，但有更新的 plunker ，展示我们如何与嵌套视图的工作。
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'
},
},
})
这里是的首页的核心模板的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>
和它是如何工作的？
我们可以看到的内容 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，它看起来像这样：
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>
监守视图目标是未命名的 ＆LT;格UI视图=＆GT;＆LT; / DIV＆GT; ，我们可以defin列表$状态是这样的：
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:
这是tpl.main.html的内容：
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'
},
},
})
我们可以看到，因为父视图是不是我们国家的目标的的（盛大父指数为目标）的，我们必须使用aboslute命名：< STRONG> '细节@指数
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'
三。 <一href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\">View名称 - 相对与绝对名称
小从DOC举：
在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。
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路由器。我们在这里展示了如何使用嵌套 视图命名（绝对/相对），以及如何使用多个视图作为一个国家的（指数状态定义）的结果
请注意，所有的行动这里的（点击顶部的inex.html ，然后尽量选择一些细节）的
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路由器多个UI-查看HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
