使用 Angular UI 路由器时的多个 index.html答案

【问题标题】：Multiple index.html when using Angular UI Router使用 Angular UI 路由器时的多个 index.html
【发布时间】：2015-12-18 19:33:06
【问题描述】：

我是使用 Angular 和 Meteor 的新手。目前我正在努力使用 Angular UI 路由器，我有一个 index.html 文件，它类似于带有 <div ui-view></div> 的主布局模板，路由器将根据当前路由呈现视图模板。

是否可以创建更多像index.html 这样的布局模板文件，并选择我们要在哪个版本的index.html 中渲染视图模板？

这可能是因为网站上的大多数页面都使用index.html 中定义的特定布局，但少数页面可能需要自己的特殊布局（即：无标题等）

【问题讨论】：

Angular 是一个单页应用程序，所以你不需要这样做。这是我开始项目时的个人指南。您不能在这种方法中为每个页面创建唯一的布局。看这里。 github.com/jofftiquez/angular-app-starter-pack

标签： javascript angularjs meteor angular-meteor

【解决方案1】：

您不想使用单独的 index.html 页面，因为这是保存所有 angular 脚本的地方，而转换到新的 index.html 意味着再次加载所有脚本。

相反，您可以使用 abstract parent states 代表模板，并带有自己的 ui-view 来填充子状态。

来自 Ui-Router Wiki：

$stateProvider
.state('contacts', {
    abstract: true,
    templateUrl: 'contacts.html'
})
.state('contacts.list', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.detail.html'
})

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

【讨论】：

【解决方案2】：

您要求拥有许多 index.html 文件以及 ui-router 的设计很弱。但我会回答你的问题。

在index.html 中实现不同布局的一种方法是使用ui-view 管理器指令来监听状态。您可以在您的ui-view 可能去的所有不同地方使用此指令，并让它根据状态插入指令ui-view。

你的指令也可以显示/隐藏它的父块来强加你的布局配置。这样您就可以在ui-router 替换标记之前配置您的index.html 布局块。

【讨论】：