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

Posted 2023-03-05

技术标签:

【中文标题】ui-router 中的多个 ui-view html 文件【英文标题】：multiple ui-view html files in ui-router 【发布时间】：2014-10-10 12:46:15 【问题描述】：

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

【问题讨论】：

【参考方案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'
          ,
        ,
      )

这里是 index 核心模板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>

确实有一些导航到 index 或 list view。列表视图，将被注入到 tpl.left.html 中，如下所示：

<div>
  This is a tpl.left.html

  <h4>place for list</h4>
  <div ui-view=""></div>
</div>

因为视图目标是未命名的<div ui-view=""></div>，我们可以这样定义list $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"，这就是为什么我们必须像这样定义 detail 状态：

.state('index.list.detail', 
        url: '/:id',
        views: 
          'detail@index' : 
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          ,
        ,
)

我们可以看到，因为父视图不是我们状态的目标（祖父索引是目标）我们必须使用绝对命名：'detail@index'

三。 View Names - Relative vs. Absolute Names

来自文档的小引用：

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

总结：所以，这个例子就是关于它——关于ui-router 的几乎所有基本特性。我们在这里展示了如何使用嵌套、视图命名（绝对/相对）以及如何为一个状态使用多个视图（索引状态定义） 请注意所有在行动here （单击顶部的 inex.html，然后尝试选择一些详细信息）

【讨论】：

你做的真是太棒了！我很感激。我对你的笨蛋大发雷霆，现在我明白了很多事情。不过，我有第一个问题。我应该怎么做才能使 layout.html 动态化？比如在同一个地方切换ui-view=left和ui-view=main？我想说，你可以做任何你想做的事，同时牢记这一点：1) 动态是状态而不是视图 2) 视图属于状态，并且可以为每个状态定义许多视图。这意味着：如果我们想切换视图 - 我们必须使用不同的状态......我会尝试在那个 plunker 上显示从这一点来看，Ui 路由器似乎非常灵活。谢谢您，先生，您的 plunker 示例对我帮助非常大，我现在会尝试自己玩。请检查更新版本plnkr.co/edit/RqA2DuPnNEoYBBC8UrjL?p=preview。我添加了新的状态 List2 来切换主和左.... list2.detail 确实显示了我们如何可以针对更多视图进行详细定位...享受ui-router ...令人惊叹的工具我认为我解释得不正确，但我会尝试自己做，到目前为止你做得很好。

以上是关于ui-router 中的多个 ui-view html 文件的主要内容，如果未能解决你的问题，请参考以下文章

如何在触发状态转换 ui-router 时保留 ui-view 的旧内容并更改另一个

angularJs ui-router路由之多视图实现菜单缓存切换

Angular ui-router 滚动到顶部，而不是 ui-view

如何在 ui-router angularjs 中保持父级相同的同时仅更改子级 ui-view？

Angular UI-Router，父 ui-view 渲染，但带有模板的子视图不渲染

ui-router ng-router