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，然后嘗試選擇一些細節）

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

問題描述

1 個解決方案

解決方案1
11 已采納 2014-08-17 13:33:29

I.列表視圖

II。詳細視圖

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

問題描述

1 個解決方案

解決方案1 11 已采納 2014-08-17 13:33:29

I.列表視圖

II。 詳細視圖

解決方案1
11 已采納 2014-08-17 13:33:29

II。詳細視圖