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';