ui-router中的多个ui-view html文件

Question

是否可以使用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只是一个文本。

Answer 1

我不确定我是否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，然后尝试选择一些细节）