AngularJS : Difference between angular-route and angular-ui-router

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 !

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/

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

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.

Why You Should Use UI-Router:

Multiple Views: Most applications can be broken up into regions. At a minimum, applications usually have a header, a main content area, and a footer.

Commonly, applications may have an additional sidebar on the left or right side of the page as shown below.

In most use cases, all of these regions (views) are shown on the page at the same time. With the built-in AngularJS router, ngRoute, only one view (ng-view) is allowed per page. This limitation causes people to use includes (ng-include) or other workarounds to create a layout or master page for their application. UI-Router supports multiple views and each can have it’s own corresponding Controller so that each of these regions can be encapsulated and reused throughout the application if needed.

Nested Views: The common example of a nested view in applications is a master/detail or, more specifically, a list/detail page. Many applications show a list of items then when you click on an item you see the detail for that item. Taking this example further, you might then click an edit link when viewing the item’s details that takes you to an editable form for the item (see the diagram below to visualize).

This scenario is easily achieved with the built-in AngularJS router, ngRoute, if the list and detail are on separate pages (or views as they are called in AngularJS). However, if you want the list to remain on the page while you show the detail to the right or below the list this becomes more challenging.

To be clear, this requirement can be achieved with ngRoute by sharing a single view with two controllers: one for the list and one for the detail and hiding and showing the detail as needed.

The result is not ideal because we would like the list and detail to each have their own controller and view with only one responsibility (showing a list or showing item details). By encapsulating these user interface areas in their own view we can have a more composable UI that allows us to bring the pieces together or break them apart as needed to meet requirements.

Nested views enable us to not only to bring these views together at the same time, but also to nest a view inside another view.

Generally ui-router work on state mechanism... It can be understand with an easy example... Lets say we have a big application of music library ( like ..gaana or saavan or any other) And at the bottom of the page you have 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 full page. That can be easily handled by ui-router.

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

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.

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.

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.

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

ui router make ur life easier! you can add it to you Angular app via injecting it into your app..

ng-route comes as part of the core Angular, so it's simpler and give u less options...

Look at here to understand ng-route better : https://docs.angularjs.org/api/ngRoute

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

ng-ui-router is different but:

https://github.com/angular-ui/ui-router but gives you more options....

Basic thing you have to know: ng-router uses $locarion.go and ui-router uses $state.go

Rest us all features.

ng-route:

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

ng-route: url (Location) based routing.

Ex:

$routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })

ui-route:

ui-router is develoepd by 3rd party module.

ui-router : state based routing

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

--> ui-router allows for nested views

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

ng-router, ui-router