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

IT技术 javascript angularjs angularjs-routing angular-ui-router angularjs-module
2021-01-13 01:00:11

我计划在我的大型应用程序中使用AngularJS所以我正在寻找要使用的正确module。

是什么区别(角route.js)ngRouteUI的路由器(角-UI-router.js)module?

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

我应该使用哪个module以获得更好的可管理性和可扩展性?

6个回答

ui-router是一个第三方module,非常强大。它支持普通 ngRoute 可以做的一切以及许多额外的功能。

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

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

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

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

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

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

ui-router本质上是ngRouter,功能比较多,在sheet下就大不一样了。这些附加功能对于大型应用程序非常有用。

更多信息:

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

ngRoute是 AngularJS 团队开发的一个module,它是 AngularJS 核心的早期部分。

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

来自 ui-router文档

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

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

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

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

FWIW 我只是花了好几个小时在 ui-router 上敲打 angularjs。文档处于非常抱歉的状态,它显然已经被遗弃多年了。重要指南的链接断开,教程中的 nuget 包名称错误,您可以命名。最终我在我无法弄清楚这个问题后放弃了stackoverflow.com/questions/23585065/...(以及许多其他人)。现在正在尝试 ngRoute...
2021-04-05 01:00:11

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

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

Ui-router 是一个贡献module,它克服了 ngRoute 的问题。主要是嵌套/复杂视图。

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

ui-router 和 ngRoute 的一些区别

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

在此处输入图片说明

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

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

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

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

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

我认为这是一个有效的答案。angular-route-segment.com对于那些不想使用 ui-router 的人来说绝对是一个不错的选择。还有@vially,人们努力创建这些库,推广它并不是一件坏事
2021-03-22 01:00:11
我看不出你的回答有什么相关性。作者特地询问了angular-route和angular-ui-router的区别。此外,在推广您自己的库时,声明您是创建者会很有用。
2021-03-27 01:00:11
相关性很简单:angular-route + angular-route-segment = angular-ui-router。所以,区别在于:angular-ui-router - angular-route = angular-route-segment :)
2021-04-08 01:00:11