ui-router中的多个ui-view html文件
是否有可能使用ui-view使用2个或更多的html文件？ 我需要它是这样的： 
我已经尝试了一些关于plinker的工作，但看起来我显然不理解概念。 我已经阅读了一个嵌套的ui-vew教程，但是他们很简单地创build一个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只是一个文本。
我不确定我是否理解你的目标是100％，但是有更新的重点 ，展示我们如何使用嵌套视图。
首先，有一个显示嵌套的$ 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' }, }, })
我们可以看到，因为父视图不是我们国家的目标（macros父索引是目标），我们必须使用aboslute命名： 'detail@index'
III。 查看名称 – 相对与绝对名称
从doc小引用：
在幕后，每个视图都被赋予一个绝对名称，该名称遵循
viewname@statenamescheme，其中viewname是view指令中使用的名称，state名称是状态的绝对名称，例如contact.item。 您也可以select以绝对语法编写视图名称。
概要：
所以，这个例子就是关于它 – 几乎所有的ui-router基本function。 我们在这里展示了如何使用嵌套 ， 查看命名 （绝对/相对）以及如何为一个状态使用多个视图 （索引状态定义）
请注意，在这里的所有行动（点击顶部的inex.html，然后尝试select一些细节）