个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 14:06:04 25 4
gpt4 key购买 nike

是否可以使用 ui-view 使用 2 个或更多 html 文件制作某些东西？我需要它是这样的: enter image description here

我尝试在 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% 理解您的目标，但已更新 plunker ，展示了我们如何使用嵌套 View 。

首先，有一个显示嵌套的 $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>

它是如何运作的？

我。 ListView

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

确实有一些导航到索引或 ListView 。 ListView 将被注入(inject)到 tpl.left.html 中，如下所示:

<div>
  This is a tpl.left.html

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

因为 View 目标未命名 <div ui-view=""></div> ，我们可以这样定义列表 $state:

.state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
})

我们可以看到，我们的目标是未命名的索引(根)状态 View anchor 。但对于细节，我们确实使用了不同的技术:

二。详细 View

这是 tpl.main.html 的内容:

<div>
  This is a tpl.main.html

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

在这种情况下， View 的 anchor 命名为:ui-view="detail"，这就是为什么我们必须像这样定义 detail 状态:

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

我们可以看到，因为父 View 不是我们状态的目标(祖父索引是目标)，我们必须使用绝对命名:<强> 'detail@index'

三。 View Names - Relative vs. Absolute Names

来自文档的小引用:

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-router 的几乎所有基本特征。 .我们在这里展示了如何使用嵌套、 View 命名(绝对/相对)以及如何为一种状态使用多个 View (索引状态定义)
请注意所有的 Action here (单击顶部部分的 inex.html，然后尝试选择一些详细信息)

关于javascript - ui-router 中的多个 ui-view html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25349170/

25 4 0
文章推荐： android - 可观察的 zip 顺序
文章推荐： Git-archive 远程端挂了
文章推荐： macos - 如何在 Mac OS git 中启用分支提示？
文章推荐： 安卓相机 : Empty file in onActivityResult method
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com