current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 208 down vote favorite
87

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.

share|improve this question

6 Answers 6

up vote 292 down vote accepted

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:

share|improve this answer
40  
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
up vote 37 down vote

ngRoute is a module developed by the Angular.js team which was earlier part of the Angular core.

ui-router is a framework which was made outside the Angular.js project to improve and enhance routing capabalities.

From the ui-router documentation:

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. 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.

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. I recommend you to chose ui-router.

Hope that help !

share|improve this answer
up vote 13 down vote

ngRoute is part of the core AngularJS framework.

ui-router is a community library that has been created to attempt to improve upon the default routing capabilities.

here is a good article about configuring/setting up ui-router:

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

share|improve this answer
up vote 11 down vote

If you want to make use of nested views functionality implemented within ngRoute paradigm, try angular-route-segment - it aims to extend ngRoute rather than to replace it.

share|improve this answer
4  
I don't see the relevancy of your answer. The author asked specifically about the differences between angular-route and angular-ui-router. Also, a disclaimer that you are the creator would be useful when promoting your own libraries. –  vially Jun 2 '14 at 17:53
7  
The relevancy is simple: angular-route + angular-route-segment = angular-ui-router. So, the difference is: angular-ui-router - angular-route = angular-route-segment :) –  artch Jun 3 '14 at 6:30
up vote 8 down vote

ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.

URL: https://github.com/angular-ui/ui-router

Some of the difference between ui-router and ngRoute

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

enter image description here

share|improve this answer
up vote 0 down vote

ngRoute is basic routing library, where you can specify just one view and controller for any route.

With ui-router, you can specify multiple views, both parallel and nested. So if you app requires (or may require in future) any kind of complex routing/views, then go ahead with ui-router.

This is best getting started guide for AngularUI Router.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.