索引頁面與AngularJS應用程序的其餘部分分開嗎？

我正在使用AngularJS在兩個項目上工作，而且他們都遇到了同樣的問題。索引頁面與AngularJS應用程序的其餘部分分開嗎？

問題是我的索引頁看起來與任何內部頁面完全不同，這意味着我的ng-view必須由整個頁面組成。這使得路線發生變化時，整個頁面必須重新加載，而不僅僅是主要內容區域。這會導致標題或側欄等內容短暫閃爍。

唯一的好方法，我能想到的，使我的索引頁單獨從我的應用程序是從字面上有一個單獨的文件夾中的一個單獨的靜態index.html然後我所有的angularJS的網頁，這樣我可以用更專注ng-view。

這是唯一/最好的方法嗎？有沒有人做到這一點，或有任何想法如何？謝謝。

來源

2013-07-19 Jakemmarsh

如何使用NG-顯示錶明不是「指數」頁面上有條件的部分（頁眉/導航/等）？ – shaunhusain

解決此問題的一種方法是使用UI-Router。

例如：

你可以有一個app.html這是保存你所有的應用程序視圖頁面。其中添加了：

<body> 
    <div ui-view></div> 
</body>

以及整個應用程序所需的樣式/腳本。

您所有的意見都會去那裏，包括index.html視圖。

假設除索引的網頁有某種頭/體/頁腳佈局中，身體的變化，根據實際的頁面，您可以使用如下配置：

var app = angular.module('app', []) 
.config(['$stateProvider', function ($stateProvider) 
{ 
    $stateProvider 
     .state('index', { 
      url: '/index', 
      templateUrl: 'index.html', 
      controller: 'IndexController' 
     }) 
     .state('root', { 
      templateUrl: 'root.html', 
      controller: 'RootController' 
     }) 
     .state('root.somePage', { 
      url: '/some-page', 
      templateUrl: 'some-page.html', 
      controller: 'SomePageController' 
     }) 
     .state('root.anotherPage', { 
      url: '/another-page', 
      templateUrl: 'another-page.html', 
      controller: 'AnotherPageController' 
     }); 
}

的root.html會像ASP.NET Web表單一個母版所以這將是形式：

<!-- header markup here --> 

<div ui-view></div> 

<!-- footer markup here -->

來源

2013-07-19 08:35:24

這聽起來正是我所需要的。 stateProvider是否會替換routeProvider？ – Jakemmarsh

@Jakemmarsh，這是我的理解，它取代了routeProvider，添加了多級視圖/狀態：https：//github.com/angular-ui/ui-router/wiki –

索引頁面與AngularJS應用程序的其餘部分分開嗎？

回答

相關問題