Question

我刚接触使用Angular和Meteor。目前我正在努力使用Angular UI路由器，我有一个index.html文件，就像一个带有<div ui-view></div>的主要布局模板，路由器将根据当前路径呈现视图模板。

是否可以创建更多布局模板文件，例如index.html，并选择我们要在哪个版本的index.html呈现视图模板？

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

Answer 1

您不想使用单独的index.html页面，因为这是保存所有角度脚本的地方，转换到新的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>

Answer 2

您要求将index.html个文件与ui-router一起设置为弱设计。但我会回答你的问题。

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

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

使用Angular UI Router时有多个index.html

2 个答案: