javascript - with - ui router angularjs

What is the difference between angular-route and angular-ui-router? (10)

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?

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.

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.

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

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.

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

Rest us all features.

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.

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.

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.

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: