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

上官修文

2023-03-14

问题内容：

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

问题答案：

我不确定我是否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>

以及它如何运作？

一，列表视图

我们可以看到 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'
})

我们可以看到，我们以未命名的索引（根）状态视图锚为目标。但对于细节，我们确实使用了不同的技术：

二。详细视图

这是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'
          },
        },
})

我们可以看到，由于父视图不是我们状态的目标（大父级 索引是目标）， 我们必须使用笨拙的命名：
'detail@index'

三，视图名称-相对名称与绝对名称

来自doc的小引用：

在幕后，每个视图都被分配一个遵循方案的绝对名称 viewname@statename
，其中viewname是view 指令中使用的名称，状态名称是该状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

简介：
因此，本示例就是有关此示例的-几乎所有的基本功能ui-router。我们在这里展示了如何使用嵌套， 视图命名
（绝对/相对），以及如何为一个状态使用 多个视图 （索引状态定义）。
请注意，这里的
所有操作都
起作用（单击顶部的inex.html，然后尝试选择一些细节）

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

一，列表视图

二。详细视图

相关阅读

相关文章

相关问答

相关工具

相关文档