javascript - angular-route和angular-ui-router之间有什么区别？(What is the difference between angular-route and angular-ui-router?)

Question

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?

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

  ask by Premchandra Singh translate from so

Answer 1

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/#/)