题 angular-route和angular-ui-router之间有什么区别?


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

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

在许多文章中 ngRoute 使用,路由配置 $ routeProvider。但是,使用时 UI路由器,路由配置 $ stateProvider和$ urlRouterProvider

我应该使用哪个模块来提高可管理性和可扩展性?


1005
2018-01-09 15:03


起源


更何况 角的 新 路由器 1.4+和2.0 - Zach Lysobey


答案:


UI路由器 是第三方模块,非常强大。它支持正常ngRoute可以执行的所有操作以及许多额外功能。

以下是ui-router比ngRoute选择的一些常见原因:

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

  • ui-router允许您根据状态名称在状态之间建立强类型链接。在一个地方更改网址会在您构建链接时更新指向该状态的每个链接 ui-sref。对于URL可能更改的大型项目非常有用。

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

  • 状态 允许您映射和访问有关不同状态的不同信息,您可以轻松地通过状态在状态之间传递信息 $stateParams

  • 您可以轻松确定您是否处于状态或父状态,以通过模板调整UI元素(突出显示当前状态的导航) $state 由ui-router提供,你可以通过设置它来公开它 $rootScope 上 run

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

更多信息:


1082
2018-01-09 15:24



总的来说,这是最好的解释,但有一个关键点:“总的来说,ui-router是具有更多功能的ngRouter”。它比那更基础: ngRoute 只允许您将控制器和模板分配给URL路由,而基本的抽象则分配给 ui.router 是状态,这是一个更强大的概念。 - Nate Abele
在这个答案中,指出文件大小的差异可能与某些人有关。截至目前 ngRoute:35.9kB / 4.4kB / 2.5kB和 ui-router:162.9kB / 30.4kB / 11.6kB(未经分割/缩小/压缩)。 - Alex Ross
2015年我们是否真的担心162kb? - Catfish
为什么不@Catfish?世界上有很多地方网络连接不好,担心它非常重要! - Bruno Casali
@tfrascaroli我不同意 - 如果用户第一次加载你的应用,页面加载时间 与跳出率密切相关。在向页面添加另外130kB之前,我肯定会考虑成本/收益。 - Anthony Manning-Franklin


ngRoute 是由AngularJS团队开发的模块,该团队是AngularJS核心的早期部分。

UI路由器 是一个在AngularJS项目之外制作的框架,用于改进和增强路由功能。

来自ui-router 文件

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

允许您使用命名,嵌套和并行视图   有力地管理您的应用程序的界面。

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

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


125
2018-01-09 15:30



FWIW我花了几个小时的时间撞击ui-router for angularjs。文件处于非常令人遗憾的状态,显然多年来一直被遗弃。指向重要指南的断开链接,教程中错误命名的nuget包,您可以命名。在我无法弄清楚这个问题之后,我最终放弃了 stackoverflow.com/questions/23585065/... (以及看似很多其他人)。现在试试ngRoute ...... - UnionP


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

网址: 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/

enter image description here


64
2017-12-18 13:05





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

ui-router是一个社区库,它是为了尝试改进默认路由功能而创建的。

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

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


49
2018-01-09 15:28





如果您想使用ngRoute范例中实现的嵌套视图功能,请尝试 角路径段  - 它旨在扩展ngRoute而不是替换它。


34
2018-04-07 19:24



我没有看到你答案的相关性。作者特别询问了angular-route和angular-ui-router之间的区别。此外,在宣传您自己的库时,您作为创建者的免责声明会很有用。 - vially
相关性很简单:angular-route + angular-route-segment = angular-ui-router。所以,区别在于:angular-ui-router - angular-route = angular-route-segment :) - artch
我认为这是一个有效的答案。 angular-route-segment.com 对于那些不想使用ui-router的开销的用户来说绝对是个不错的选择。另外,人们努力创建这些库,推广它并不是一件坏事 - phil


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

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

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

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


18
2018-01-02 22:36



这可以完成,必须使用服务和工厂完成。使用这个包是缺乏对角度路线,状态和模式的理解。状态由url处理,如果你想在一个specefic状态下共享app,这是正确的,而且你可以在同一个视图中有多个控制器对服务数据更新或url参数作出反应。 ui路由器弄乱了东西并完全破坏了角度模式。 - Pablo Ezequiel Leone
我完全同意。仍无法找到有必要使用此状态机的解释 - kushalvm


Angular 1.x

NG-路线

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

NG-路线: url(位置)路由。

例如:

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

UI路线

ui-router由第三方模块开发。

ui-router: 基于状态的路由

例如:

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

- > ui-router允许嵌套视图

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

NG-路由器UI路由器


16
2017-08-30 12:12





ngRoute是由Angular团队构建的模块,提供基本的客户端路由功能。该模块为路由提供了相当强大的基础,并且可以非常容易地构建,以提供可靠的路由功能,如中所示 这篇博文 (一定要阅读Ward Bell和Ben Nadel之间的评论记录,作者 - 他们是一对Angular专业人士)

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

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

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

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

可以找到ngRoute和ui-router的良好比较 这个播客 插曲。

只是为了让事情变得更加混乱,请关注Angular团队期望为Angular版本1.5和2.0发布的新“官方”路由模块。这将取代ngRoute模块。 这里  是新路由器模块的当前文档 - 由于该实现尚未最终确定,因此该帖子相当稀疏。看 这里 有关何时实际发布此模块的更多新闻。


13
2018-06-27 03:58





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

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

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


11
2017-08-28 10:06





你必须要知道的基本事项:ng-router使用 $location.path() 和ui-router使用 $state.go

让我们了解所有功能。


10
2017-10-30 00:18





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

ng-route 作为核心AngularJS的一部分,所以它更简单,并为您提供更少的选项......

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

使用它时,不要忘记使用:ngView ..

ng-ui-router不同但是:

https://github.com/angular-ui/ui-router 但给你更多选择....


8
2017-10-16 13:34