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

本文翻译自：What is the difference between angular-route and angular-ui-router?

I'm planning to use AngularJS in my big applications. 我打算在我的大型应用程序中使用AngularJS。 So I'm in the process to find out the right modules to use. 所以我正在寻找合适的模块。

What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-router.js) modules? ngRoute（angular-route.js）和ui-router（angular-ui-router.js）模块有什么区别 ？

In many articles when ngRoute is used, route is configured with $routeProvider . 在使用ngRoute的许多文章中，使用$ routeProvider配置路由。 However, when used with ui-router , route is configured with $stateProvider and $urlRouterProvider . 但是，当与ui-router一起使用时 ，路由配置为$ stateProvider和$ urlRouterProvider 。

Which module should I use for better manageability and extensibility? 我应该使用哪个模块来提高可管理性和可扩展性？

---

#1楼

参考：https://stackoom.com/question/1QDEx/angular-route和angular-ui-router之间有什么区别

---

#2楼

ui-router is a 3rd-party module and is very powerful. ui-router是第三方模块，非常强大。 It supports everything the normal ngRoute can do as well as many extra functions. 它支持正常ngRoute可以执行的所有操作以及许多额外功能。

Here are some common reason ui-router is chosen over ngRoute: 以下是ui-router比ngRoute选择的一些常见原因：

• ui-router allows for nested views and multiple named views . ui-router允许嵌套视图和多个命名视图 。 This is very useful with larger app where you may have pages that inherit from other sections. 这对于较大的应用程序非常有用，您可以从其他部分继承页面。

• ui-router allows for you to have strong-type linking between states based on state names. ui-router允许您根据状态名称在状态之间建立强类型链接。 Change the url in one place will update every link to that state when you build your links with ui-sref . 当您使用ui-sref构建链接时，在一个位置更改URL将更新指向该状态的每个链接。 Very useful for larger projects where URLs might change. 对于URL可能更改的大型项目非常有用。

• There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. 还有装饰器的概念，可用于允许根据尝试访问的URL动态创建路由。 This could mean that you will not need to specify all of your routes before hand. 这可能意味着您不需要事先指定所有路线。

• states allow you to map and access different information about different states and you can easily pass information between states via $stateParams . 状态允许您映射和访问有关不同状态的不同信息，您可以通过$stateParams轻松地在状态之间传递信息。

• You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on run . 您可以通过ui-router提供的$state来轻松确定您是处于州或州的状态，以调整模板中的UI元素（突出显示当前状态的导航），您可以通过在$rootScope设置它来公开它run 。

In essence, ui-router is ngRouter with more features, under the sheets it is quite different. 本质上，ui-router是具有更多功能的ngRouter，在表单下它是完全不同的。 These additional features are very useful for larger applications. 这些附加功能对于大型应用程序非常有用。

More Information: 更多信息：

• Github: https://github.com/angular-ui/ui-router Github： https ： //github.com/angular-ui/ui-router
• Documentation: 文档：
  • API Reference: http://angular-ui.github.io/ui-router/site/#/api API参考： http ： //angular-ui.github.io/ui-router/site/#/api
  • Guide: https://github.com/angular-ui/ui-router/wiki 指南： https ： //github.com/angular-ui/ui-router/wiki
• FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions 常见问题解答： https ： //github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Sample Application: http://angular-ui.github.io/ui-router/sample/#/ 样本申请： http ： //angular-ui.github.io/ui-router/sample/#/

---

#3楼

ngRoute is part of the core AngularJS framework. ngRoute是核心AngularJS框架的一部分。

ui-router is a community library that has been created to attempt to improve upon the default routing capabilities. ui-router是一个社区库，它是为了尝试改进默认路由功能而创建的。

Here is a good article about configuring/setting up ui-router: 这是一篇关于配置/设置ui-router的好文章：

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

---

#4楼

ngRoute is a module developed by the AngularJS team which was earlier part of the AngularJS core. ngRoute是由AngularJS团队开发的模块，该团队是AngularJS核心的早期部分。

ui-router is a framework which was made outside the AngularJS project to improve and enhance routing capabilities. ui-router是一个在AngularJS项目之外创建的框架，用于改进和增强路由功能。

From the ui-router documentation : 从ui-router 文档 ：

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. AngularUI Router是AngularJS的路由框架，它允许您将接口的各个部分组织到状态机中。 Unlike the $route service in Angular core, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached. 与围绕URL路由组织的Angular核心中的$ route服务不同，UI-Router围绕状态进行组织，这些状态可以选择性地具有路由以及附加的其他行为。

States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface. 状态绑定到命名，嵌套和并行视图，允许您有力地管理应用程序的界面。

Neither of them is better, you will have to chose the most appropriate for your project. 它们都不是更好，你必须选择最适合你的项目。

However, if you plan to have complex views in your application and you would like to deal with the "$state" notion. 但是，如果您计划在应用程序中使用复杂视图，并且希望处理“$ state”概念。 I recommend you to chose ui-router. 我建议你选择ui-router。

---

#5楼

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

---

#6楼

ngRoute is a basic routing library, where you can specify just one view and controller for any route. ngRoute是一个基本的路由库，您可以在其中为任何路由指定一个视图和控制器。

With ui-router, you can specify multiple views, both parallel and nested. 使用ui-router，您可以指定多个视图，包括并行和嵌套。 So if your application requires (or may require in future) any kind of complex routing/views, then go ahead with ui-router. 因此，如果您的应用程序需要（或将来可能需要）任何类型的复杂路由/视图，请继续使用ui-router。

This is best getting started guide for AngularUI Router. 这是AngularUI路由器的最佳入门指南。