我們可以爲包含它們的不同模板的單個應用程序創建兩個ng-view嗎？

Question

查看單個Web應用程序，其周圍有不同的主體，即主模板旁邊的頁眉和頁腳應該不同。我們可以根據$ stateProvider中的URL來決定選擇哪個模板

Answer 1

如果您使用的是$ stateProvider，那麼您必須使用ui-view指令而不是ng-view。 ng-view是ngRoute服務，您需要使用$ routeProvider。

是的，你可以在同一頁面上有多個ui-view，它被稱爲多個命名視圖。因此，讓我們在index.html的說，你可以把它想：

<div ui-view="header"></div> 
<div ui-view="mainsection"></div> 
<div ui-view="footer"></div> 

現在在你的狀態deinition你可以有這樣的：

$stateProvider  
    .state('app', {   
    views: {   
     'header': { ... templates and/or controllers ... }, 
     'mainsection': { ... templates and/or controllers ... }, 
     'footer': { ... templates and/or controllers ... } 
    }  
}) 

現在在不同的視圖上面的代碼，你可以有不同的一組模板以及具有特定url的特定狀態的控制器（或版本> 1.5以上的組件）。因此，您可以通過這種方式爲每個狀態（url）決定顯示頁眉，頁腳，內容等頁面特定部分的內容。如果某些部分將保持不變，那麼通過對具有該特定視圖名稱的那些狀態使用相同的templateUrl，可以獲得很好的可重用性功能。

結帳有關更多詳細信息的文檔：https://ui-router.github.io/guide/views#multiple-named-uiviews