使用Angular UI Router時多個index.html

Question

我是初次使用Angular和Meteor。 目前，我正在努力使用Angular UI Router，其中有一個index.html文件，該文件類似於帶有<div ui-view></div>的主布局模板，其中路由器將根據當前路線渲染視圖模板。

是否可以創建更多布局模板文件（如index.html ，並選擇我們要在其中渲染視圖模板的index.html版本？

這可能是因為網站上的大多數頁面都使用index.html定義的特定布局，但是少數頁面可能需要自己的特殊布局（即：無標題等）。

Answer 1

您不想使用單獨的index.html頁面，因為這是所有角度腳本的保存位置，並且過渡到新的index.html意味着再次加載所有腳本。

取而代之的是，您可以使用抽象的父狀態 ，這些狀態以其自己的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 manager指令來監聽狀態。 您可以在用戶ui-view所有不同位置使用此指令，並根據狀態將其插入指令ui-view 。

您的指令還可以顯示/隱藏其父塊以強加您的布局配置。 這樣，您可以在ui-router替換標記之前配置index.html布局塊。