Angular JS是否支持在同一頁面上路由多個視圖

Question

Angular JS是否支持在同一頁面上擁有多個ng-view部分，每個部分都有自己的模板？ 設置其配置時，您需要將不同的URL路徑連接到不同的控制器和模板。 但是當你在同一頁面上有多個視圖時，他們每個人都需要使用url中的#path值調整他們的模板和控制器，並更改我們需要在#path值更改時切換的視圖模板。

那么不同的ng-view部分如何相互影響 - 因為每個部分都需要將自己唯一的#path值附加到url。 或者url路徑和#value以某種方式保存為每個ng視圖中的私有構造，因此允許在同一頁面上有多個ng-view部分。

Answer 1

多個視圖是angularjs的一個限制，文檔沒有說明如何正確構建具有復雜視圖的應用程序。 請查看Jan Varwig關於此主題的帖子

• 如何在AngularJS中執行嵌套視圖（提示：不要）

• AngularJS：視圖與指令

相關章節：

“ 視圖不是你用來構建應用程序的東西！事實上，視圖更像是一個拐杖，一種快捷方式，創建類似於傳統網站的結構，只有角度作為驅動程序。在開發Web應用程序時，處理方式具有復雜接口的組合使用：范圍對象/變量，用於存儲您所需的視圖狀態，顯式ngSwitch指令在此視圖狀態指令包含自定義模板/執行復雜的DOM操作行為停止根據需要的視圖考慮您的應用程序這種想法與命令式框架更好地對齊，但在角度方面效果不佳。“

“ View-Containers毫無意義，通過路由與語義分離。另外，我對UI-Routers嵌套視圖的第二個抱怨是它們違反了AngularJS的另一個核心思想：你的DOM是描述結構的主要場所。你的應用程序。閱讀模板可以讓你了解到底是什么。如果你想編輯一個用戶，把一個指令放到你的模板中：讀者會立即看到該指令的作用以及它所依賴的數據。如果你寫的話該指令正確地與位置無關，你可以將它放在你的應用程序的其他地方，只要你傳入一個用戶通過它將工作的屬性。使用views使用無意義的容器填充你的模板，外包每個視圖的實際目的如果嵌套路由，每個視圖的上下文變得隱含，移動它們就更難了，將數據傳遞到視圖的唯一方法就是通過范圍。“

Answer 2

ng-route不支持ng-app內的多個ng-view 。

您可以將ui-router視為一個項目，它為與URL綁定的多個布局（包括嵌套布局）提供了一些支持。

買者自負

注意：UI-Router正在積極開發中。 因此，雖然此庫經過了充分測試，但API可能會發生變化。 只有在您熟悉更改日志並相應更新使用情況時，才考慮在生產應用程序中使用它。

Answer 3

使用ui-router代替罐裝ng-route！ ui-router完全具有嵌套視圖，它非常棒且非常容易學習。 我建議使用ui-router而不是ngRoute給任何人。

Answer 4

在對此進行了進一步閱讀之后，似乎雖然多個ng-view的功能已經有多個請求但是它無法進入Angular版本，但是在將來的版本中可能存在某些內容。

在這個討論中， Misko Hevery指出了另一種方法，即使用ng-include。

然后在Jan Varwig的帖子中也有自定義指令方法，Vikas已經引用了這些方法。

還在github上找到了這個Angular Multiple View項目，這可能是另一種方法。

Answer 5

對於這類事情，您可以使用模板。

創建一個文件，例如firstNavigation.html，其中包含您的html片段。 然后在控制器中調用它。

$ scope.nav ='src / partials / firstNavigation.html';