By Premchandra Singh

2014-01-09 15:03:28 8 Comments

I'm planning to use AngularJS in my big applications. 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?

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.

Which module should I use for better manageability and extensibility?


@UniCoder 2016-01-02 22:36:08

Generally ui-router works on a state mechanism... It can be understood with an easy example:

Let's say we have a big application of a music library (like ..gaana or saavan or any other). And at the bottom of the page, you have a music player which is shared across all the state of the page.

Now let's say you just click on some songs to play. In this case, only that music player state should change instead of reloading the full page. That can be easily handled by ui-router.

While in ngRoute we just attach the view and the controller.

@Pablo Ezequiel Leone 2016-02-10 17:31:23

this could be done and must be done using services and factories. The use of this package is lack of understanding angular routes, states and patterns. States are handled by the url, which is correct if you want to share the app in a specefic state, moreover you can have multiple controllers in the same view that react on a service data update or url param. ui router mess things up and destroy angular pattern completely.

@kushalvm 2016-07-10 13:54:09

I completely agree. Still can't find an explanation where it is necessary to use this state machine

@Ragupathy 2017-08-16 12:12:53

ng-View (developed by the AngularJS team) can be used only once per page, whereas ui-View (3rd party module) can be used multiple times per page.

ui-View is therefore the best option.

@Mahesh K 2016-08-30 12:12:12

Angular 1.x


ng-route is developed by the angularJS Team for routing.

ng-route: url (Location) based routing.


    .when("/home", {
        templateUrl : "home.html"


ui-router is develoepd by 3rd party module.

ui-router : state based routing


        .state('home', {
            url: '/home',
            templateUrl: 'home.html'

--> ui-router allows for nested views

--> ui-router more powerful than ng-route

ng-router, ui-router

@Alireza 2015-10-16 13:34:40

ui router make your life easier! You can add it to you AngularJS application via injecting it into your applications...

ng-route comes as part of the core AngularJS, so it's simpler and gives you fewer options...

Look at here to understand ng-route better:

Also when using it, don't forget to use: ngView ..

ng-ui-router is different but: but gives you more options....

@Kunal Kapadia 2014-08-28 10:06:59

ngRoute is a 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 your application 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.

@Rajat-Systematix 2017-03-08 09:51:57

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.

@digish a d 2016-10-30 00:18:18

Basic thing you have to know: ng-router uses $location.path() and ui-router uses $state.go

Rest us all features.

@user2136053 2017-01-19 09:32:51

1- ngRoute is developed by angular team whereas ui-router is a 3rd party module. 2- ngRoute implements routing based on the route URL whereas ui-router implements routing based on the state of the application. 3- ui-router provides everything that the ng-route provides plus some additional features like nested states and multiple named views.

@gab 2014-01-09 15:30:57

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

ui-router is a framework which was made outside the AngularJS project to improve and enhance routing capabilities.

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.

@UnionP 2017-08-23 01:43:11

FWIW I just spent quite a few hours banging my head against ui-router for angularjs. The documentation is in a VERY sorry state of affairs, it's clearly been left derelict for years now. Broken links to important guides, misnamed nuget packages in the tutorial, you name it. Eventually I gave up after I couldn't figure out this issue… (along with seemingly many other people). Trying out ngRoute now...

@Jake Johnson 2014-01-09 15:28:36

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:

@vaheeds 2016-02-08 05:16:19

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 the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

@Sean 2015-06-27 03:58:24

ngRoute is a module built by the Angular team that provides basic client-side routing functionality. This module provides a fairly powerful base for routing, and can be built upon pretty easily to give solid routing functionality, as exemplified in this blog post (be sure to read the comment trail between Ward Bell and Ben Nadel, the author - they are a couple of Angular pros)

ui-router shifts the focus from url-centric routes to application "states", which may or may not be reflected in the url.

The primary features added by ui-router are nested states and named views.

Nested states allow you to separate controller logic for the various pieces of the application. A very simple example of this would be an app with primary navigation across the top, a secondary navigation list along the left, and content on the right. Without nested states, a single controller would typically have to handle the display logic for the secondary navigation as well as the content. Nested routing allows you to separate these concerns.

Named views are another additional feature of ui-router. With ngRoute, you can only have a single ngView directive on a page, whereas with named views in ui-router you can specify multiple ui-view directives, and then each state is able to affect the template and controller of the names views. A super simple example of this would be to have the main content of your app be the primary view, and then to also have a footer bar that would be a separate ui-view. In this scenario, the footer's controller no longer has to listen for state/route changes.

A good comparison of ngRoute and ui-router can be found on this podcast episode.

Just to make things more confusing, keep an eye on the new "official" routing module that the Angular team is expecting to release for versions 1.5 and 2.0 of Angular. This will be replacing the ngRoute module. Here is the current documentation for the new Router module - it is fairly sparse as of this posting since the implementation has not yet been finalized. Watch here for more news on when this module will actually be released.

@Asik 2014-12-18 13:05:44

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


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


Some of the difference between ui-router and ngRoute

enter image description here

@TheSharpieOne 2014-01-09 15:24:52

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:

@Nate Abele 2014-01-11 04:03:01

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.

@Alex Ross 2015-07-21 05:04:29

It might be relevant to some to point out difference in filesize in this answer. As of right now ngRoute: 35.9kB / 4.4kB / 2.5kB and ui-router: 162.9kB / 30.4kB / 11.6kB (unminified / minified / gzipped).

@Ramya 2015-08-19 21:39:02

It would be nice if you could mention where to use $routeProvider over $stateProvider as well. :) or where is it ideally used (or preferred)?

@Catfish 2015-12-09 19:46:30

Are we seriously worried about 162kb in 2015?

@Bruno Casali 2016-04-28 18:48:08

Why not @Catfish ? There are many places in the world with bad internet connections, worry about it is very important!

@tfrascaroli 2016-05-17 12:05:36

I'm with @Catfish here, ~130Kb should be of no worry anywhere. As per wikipedia (which I'm sure is not exhaustive enough, but it's a start), the crapiest internet speed is that of Paraguay, averaging 1.5Mbps. Again, what is 130Kb compared to that. Agreed that 130Kb here and 130Kb there and etc would eventually have an impact. But for the sake of writing better code and better applications, I think we should give some stuff a pass.

@Campinho 2016-06-22 09:30:21

@TheSharpieOne I should be able to use it with Angular 2, right?

@TheSharpieOne 2016-06-22 13:43:21

@Campinho UI-router does have support for angular 2 in their newer releases, but there is also angular router which is also in active development. Because Angular 2 is also in active development and currently only in RC (not production ready), things can change (and break) very quickly.

@Anthony Manning-Franklin 2017-01-05 07:12:56

@tfrascaroli I think you're forgetting to convert bits and bytes. 1.5Mbits is 187.5kBytes per second. Meaning that 130kB will add 700ms to the client's download time assuming 100% utilisation of a 1.5mbit connection.

@tfrascaroli 2017-01-05 07:18:41

@AnthonyManning-Franklin I'm not, but thank you for the clarification anyway. But my point is: you only have to wait those 700ms (or maybe a whole 2 seconds because you have more libraries/code to be downloaded) just once. And I'm confident people won't be blaming any devs if they know their connection sucks. Besides, that is absolute worst case scenario on average, it only gets better from here. I, personally, would gladly wait for 2 seconds to get a webpage if I know it's worth it or if I enjoy the content and the UX.

@Anthony Manning-Franklin 2017-01-05 07:52:56

@tfrascaroli I disagree - if a user is loading your app for the first time, page load times correlate strongly to bounce rates . I would definitely consider the cost/benefit before adding another 130kB to the page.

@tfrascaroli 2017-01-05 10:04:52

@AnthonyManning-Franklin sure I would (and usually do) consider that aswell. But I'm usually way more concerned about parsing times and RAM usage / CPU usage of a webpage. I guess it all boils down to the kind of webpage/webapp you're developing, the code quality the extra library brings and the target you're ... well targetting :)

@maksbd19 2017-02-14 08:40:12

I hate to argue but are we seriously thinking to use the unminified file which is 160KB? shouldn't we consider the minified one or perhaps the gzipped one (which is 11.6KB)? I've used angular router in the front end part of one of my project and ui router in the admin panel. My idea was user might not be willing enough to wait, they doesn't actually have access to many resources but admin should and would.

@artch 2014-04-07 19:24:56

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.

@vially 2014-06-02 17:53:03

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.

@artch 2014-06-03 06:30:10

The relevancy is simple: angular-route + angular-route-segment = angular-ui-router. So, the difference is: angular-ui-router - angular-route = angular-route-segment :)

@phil 2017-04-07 06:29:24

i think its a valid answer. is definitely a good choice for those that don't want the overhead of using ui-router. Also @vially, people work hard to create these libraries, its not a bad thing to promote it

Related Questions

Sponsored Content

37 Answered Questions

[SOLVED] What is the !! (not not) operator in JavaScript?

  • 2009-04-24 08:13:58
  • Hexagon Theory
  • 559150 View
  • 3143 Score
  • 37 Answer
  • Tags:   javascript operators

23 Answered Questions

[SOLVED] What is the difference between call and apply?

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

35 Answered Questions

[SOLVED] What's the difference between using "let" and "var"?

77 Answered Questions

[SOLVED] What is the JavaScript version of sleep()?

  • 2009-06-04 14:41:10
  • fmsf
  • 2708090 View
  • 2371 Score
  • 77 Answer
  • Tags:   javascript sleep

18 Answered Questions

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

8 Answered Questions

[SOLVED] What is the difference between Bower and npm?

  • 2013-09-05 16:53:19
  • Games Brainiac
  • 315185 View
  • 1764 Score
  • 8 Answer
  • Tags:   javascript npm bower

Sponsored Content