Difference between angular-route and angular-ui-router

转摘：http://stackoverflow.com/questions/21023763/difference-between-angular-route-and-angular-ui-router

Difference between angular-route and angular-ui-router

up vote276down votefavorite

113

I am new to AngularJS. I find Angular quite interesting and planning to use angular in my big apps. So I am 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?

In many articles when ngRoute is used, route is configured with $routeProvider. However, when used with ui-router, route is configured with $stateProvider and $urlRouterProvider.

This creates a bit of confusion for me. Which module should I use for better manageability and extensibility? Your answers are greatly appreciated.

javascript angularjs angularjs-routing angular-ui-router angularjs-module

shareimprove this question

edited Oct 20 '14 at 18:57 Wilgert 130113

asked Jan 9 '14 at 15:03 Premchandra Singh 2,4303820

not to mention angular's new router in 1.4+ and 2.0 –  Zach L May 12 at 21:55

add a comment

7 Answers

activeoldestvotes

up vote363down voteaccepted

ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions.

Here are some common reason ui-router is chosen over ngRoute:

• ui-router allows for nested views and multiple named views. 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. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.

• 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. 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.

• 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.

In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.

More Information:

• Github: https://github.com/angular-ui/ui-router
• Documentation:
  • API Reference: http://angular-ui.github.io/ui-router/site/#/api
  • Guide: https://github.com/angular-ui/ui-router/wiki
• FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Sample Application: http://angular-ui.github.io/ui-router/sample/#/

shareimprove this answer

edited Oct 20 '14 at 18:52 Wilgert 130113

answered Jan 9 '14 at 15:24 TheSharpieOne 10.2k22748

52

Overall this is the best explanation, but for one key point: "Overall, ui-router is ngRouter with more features". It's much more fundamental than that: ngRoute merely allows you to assign controllers and templates to URL routes, whereas the fundamental abstraction in ui.router is states, which is a more powerful concept. –  Nate Abele Jan 11 '14 at 4:03 

add a comment