1105

我打算在我的大型应用程序中使用AngularJS 。所以我正在寻找合适的模块来使用。

ngRoute (angular-route.js)和ui-router (angular-ui-router.js)模块有什么区别？

在许多使用ngRoute的文章中，路由配置了$routeProvider。但是，当与ui-router一起使用时，路由配置为$stateProvider 和 $urlRouterProvider。

我应该使用哪个模块来获得更好的可管理性和可扩展性？

4

15 回答 15

1123

ui-router是一个第三方模块，非常强大。它支持普通 ngRoute 可以做的所有事情以及许多额外的功能。

以下是选择 ui-router 而不是 ngRoute 的一些常见原因：

  • ui-router 允许嵌套视图和多个命名视图。这对于较大的应用程序非常有用，您可能拥有从其他部分继承的页面。

  • ui-router 允许您基于状态名称在状态之间进行强类型链接。在一个地方更改 url 将在您使用ui-sref. 对于 URL 可能会更改的大型项目非常有用。

  • 还有装饰器的概念，可用于允许根据尝试访问的 URL 动态创建路由。这可能意味着您无需事先指定所有路线。

  • states允许您映射和访问有关不同状态的不同信息，并且您可以通过$stateParams.

  • $state您可以通过 ui-router 提供的方式轻松确定您是否处于状态或状态的父状态以调整模板中的 UI 元素（突出显示当前状态的导航） ，您可以通过将其设置为$rootScopeon来公开run。

本质上，ui-router 是具有更多功能的 ngRouter，在 sheet 下它是完全不同的。这些附加功能对于大型应用程序非常有用。

更多信息：

于 2014-01-09T15:24:52.763 回答
136

ngRoute是 AngularJS 团队开发的一个模块，它是 AngularJS 核心的早期部分。

ui-router是一个在 AngularJS 项目之外创建的框架，用于改进和增强路由功能。

从 ui-router文档：

AngularUI Router 是 AngularJS 的路由框架，它允许您将界面的各个部分组织到状态机中。与 Angular 核心中的 $route 服务围绕 URL 路由组织不同，UI-Router 围绕状态组织，这些状态可以选择附加路由以及其他行为。

状态绑定到命名的、嵌套的和并行的视图，使您能够强大地管理应用程序的界面。

它们都不是更好，您必须选择最适合您的项目的。

但是，如果您计划在您的应用程序中拥有复杂的视图，并且您想处理“$state”的概念。我建议你选择 ui-router。

于 2014-01-09T15:30:57.553 回答
73

ngRoute 是一个 Angular 核心模块，适用于基本场景。我相信他们会在即将发布的版本中添加更强大的功能。

网址：https ://docs.angularjs.org/api/ngRoute

ui-router 是一个贡献的模块，它克服了 ngRoute 的问题。主要是嵌套/复杂视图。

网址：https ://github.com/angular-ui/ui-router

ui-router 和 ngRoute 的一些区别

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

在此处输入图像描述

于 2014-12-18T13:05:44.830 回答
52

ngRoute 是核心 AngularJS 框架的一部分。

ui-router 是一个社区库，旨在改进默认路由功能。

这是一篇关于配置/设置 ui-router 的好文章：

http://www.ng-newsletter.com/posts/angular-ui-router.html

于 2014-01-09T15:28:36.407 回答
35

如果您想使用在 ngRoute 范例中实现的嵌套视图功能，请尝试angular-route-segment - 它旨在扩展 ngRoute 而不是替换它。

于 2014-04-07T19:24:56.780 回答
20

一般ui-router工作在一个状态机制上...可以通过一个简单的例子来理解：

假设我们有一个音乐库的大型应用程序（如 ..gaana 或 saavan 或任何其他）。在页面底部，您有一个音乐播放器，它在页面的所有状态中共享。

现在假设您只需单击一些歌曲即可播放。在这种情况下，只有音乐播放器的状态应该改变，而不是重新加载整个页面。这可以通过 ui-router 轻松处理。

在 ngRoute 中，我们只是附加视图和控制器。

于 2016-01-02T22:36:08.447 回答
18

角 1.x

ng路线：

ng-route 由 angularJS 团队开发，用于路由。

ng-route： 基于 url（位置）的路由。

前任：

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

ui路由：

ui-router 由 3rd 方模块开发。

ui-router :基于状态的路由

前任：

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

--> ui-router 允许嵌套视图

--> ui-router 比 ng-route 更强大

ng路由器, ui路由器

于 2016-08-30T12:12:12.540 回答
13

ngRoute 是一个由 Angular 团队构建的模块，提供基本的客户端路由功能。这个模块为路由提供了一个相当强大的基础，并且可以很容易地构建以提供可靠的路由功能，正如这篇博文中所举例说明的那样（请务必阅读作者 Ward Bell 和 Ben Nadel 之间的评论线索 - 他们是几个 Angular 专业人士）

ui-router 将焦点从以 url 为中心的路由转移到应用程序“状态”，这可能会或可能不会反映在 url 中。

ui-router 添加的主要功能是嵌套状态和命名视图。

嵌套状态允许您为应用程序的各个部分分离控制器逻辑。一个非常简单的例子是一个应用程序，其顶部是主导航，左侧是二级导航列表，右侧是内容。如果没有嵌套状态，单个控制器通常必须处理辅助导航的显示逻辑以及内容。嵌套路由允许您分离这些关注点。

命名视图是 ui-router 的另一个附加功能。使用 ngRoute，您只能在页面上拥有一个 ngView 指令，而使用 ui-router 中的命名视图，您可以指定多个 ui-view 指令，然后每个状态都能够影响名称视图的模板和控制器。一个超级简单的例子是让你的应用程序的主要内容成为主视图，然后还有一个页脚栏，它是一个单独的 UI 视图。在这种情况下，页脚的控制器不再需要监听状态/路由的变化。

可以在这个播客节目中找到 ngRoute 和 ui-router 的一个很好的比较。

只是为了让事情变得更加混乱，请密切关注 Angular 团队期望为 Angular 1.5 和 2.0 版本发布的新“官方”路由模块。这将替换 ngRoute 模块。这 是新路由器模块的当前文档 - 由于实施尚未最终确定，因此在此发布时它相当稀疏。在此处观看有关此模块何时实际发布的更多新闻。

于 2015-06-27T03:58:24.550 回答
11

ngRoute 是一个基本的路由库，您可以在其中为任何路由指定一个视图和控制器。

使用 ui-router，您可以指定多个视图，包括并行视图和嵌套视图。因此，如果您的应用程序需要（或将来可能需要）任何类型的复杂路由/视图，请继续使用 ui-router。

这是 AngularUI 路由器的最佳入门指南。

于 2014-08-28T10:06:59.790 回答
10

你必须知道的基本知识：ng-router 使用$location.path()和 ui-router 使用$state.go

休息我们所有的功能。

于 2016-10-30T00:18:18.283 回答
8

ui路由器让你的生活更轻松！您可以通过将其注入您的应用程序将其添加到您的 AngularJS 应用程序中......

ng-route作为核心 AngularJS 的一部分，它更简单，给你更少的选择......

看这里以更好地理解 ng-route：https ://docs.angularjs.org/api/ngRoute

另外在使用的时候，别忘了使用：ngView ..

ng-ui-router 不同，但是：

https://github.com/angular-ui/ui-router但为您提供更多选择....

于 2015-10-16T13:34:40.093 回答
6

AngularUI Router 是 AngularJS 的路由框架，它允许您将界面的各个部分组织到状态机中。与 Angular ngRoute 模块中的 $route 服务不同，它是围绕 URL 路由组织的，UI-Router 是围绕状态组织的，这些状态可以选择附加路由以及其他行为。

https://github.com/angular-ui/ui-router

于 2016-02-08T05:16:19.673 回答
4

ngRoute 是 Angular.js 团队开发的一个模块，它是 Angular 核心的早期部分。

ui-router 是一个在 Angular.js 项目之外创建的框架，用于改进和增强路由功能。

于 2017-03-08T09:51:57.933 回答
3

1- ngRoute 由 Angular 团队开发，而 ui-router 是第 3 方模块。2- ngRoute 实现基于路由 URL 的路由，而 ui-router 实现基于应用程序状态的路由。3- ui-router 提供了 ng-route 提供的所有功能以及一些附加功能，例如嵌套状态和多个命名视图。

于 2017-01-19T09:32:51.287 回答
0

ng-View（由 AngularJS 团队开发）每页只能使用一次，而ui-View（第 3 方模块）每页可以使用多次。

ui-View因此是最好的选择。

于 2017-08-16T12:12:53.380 回答