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

是否有可能使用ui-view使用2个或更多的html文件? 我需要它是这样的: 在这里输入图像描述

我已经尝试了一些关于plinker的工作,但看起来我显然不理解概念。 我已经阅读了一个嵌套的ui-vew教程,但是他们很简单地创build一个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只是一个文本。

       

网上收集的解决方案 "ui-router中的多个ui-view 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> 

它是如何工作的?

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

我们可以看到,因为父视图不是我们国家的目标(macros父索引是目标),我们必须使用aboslute命名: 'detail@index'

III。 查看名称 – 相对与绝对名称

从doc小引用:

在幕后,每个视图都被赋予一个绝对名称,该名称遵循viewname@statenamescheme,其中viewname是view指令中使用的名称,state名称是状态的绝对名称,例如contact.item。 您也可以select以绝对语法编写视图名称。

概要:
所以,这个例子就是关于它 – 几乎所有的ui-router基本function。 我们在这里展示了如何使用嵌套查看命名 (绝对/相对)以及如何为一个状态使用多个视图 (索引状态定义)
请注意,在这里的所有行动(点击顶部的inex.html,然后尝试select一些细节)