哪个更好的ng-view或ui-view?

时间:2016-03-23 03:25:38

标签: angularjs ng-view

对于大型项目,ui-router是首选。但它给出的主要优点是嵌套视图。但这也可以通过ng-view实现。那么选择哪一个?

1 个答案:

答案 0 :(得分:16)

使用ui-router,因为它比原生ng-view(嵌套视图......)好得多。此外,AngularJS将实现ui-router在Angular 2.0中的许多功能。

AngularJS 2.0 Router Design Document

为什么要使用UI-Router

多个观点

大多数应用程序可以分解为多个区域。应用程序通常至少具有标题,主要内容区域和页脚。 在大多数用例中,所有这些区域(视图)同时显示在页面上。使用内置的AngularJS路由器ngRoute,每页只允许一个视图(ng-view)。此限制使人们使用包含(ng-include)或其他变通方法为其应用程序创建布局或母版页。 UI-Router支持多个视图,每个视图都可以拥有自己的相应控制器,以便在需要时可以封装每个区域并在整个应用程序中重复使用。

嵌套视图

应用程序中嵌套视图的常见示例是主/详细信息,或者更具体地说,是列表/详细信息页面。许多应用程序显示项目列表,然后当您单击项目时,您会看到该项目的详细信息。进一步采用此示例,您可以在查看项目的详细信息时单击编辑链接,该链接将您带到项目的可编辑表单。

如果列表和详细信息位于不同的页面(或AngularJS中调用的视图),则可以使用内置的AngularJS路由器ngRoute轻松实现此方案。但是,如果您希望列表在页面右侧或下方显示详细信息时保留在页面上,则这将变得更具挑战性。需要说明的是,通过与两个控制器共享一个视图,可以使用ngRoute实现此要求:一个用于列表,一个用于细节,隐藏并根据需要显示详细信息。结果并不理想,因为我们希望每个列表和详细信息都有自己的控制器和视图,只有一个责任(显示列表或显示项目详细信息)。通过将这些用户界面区域封装在他们自己的视图中,我们可以拥有一个更可组合的UI,允许我们将这些部分组合在一起或根据需要将它们分开以满足要求。嵌套视图使我们不仅可以同时将这些视图组合在一起,还可以将视图嵌套在另一个视图中