What is the difference between angular-route and a

Question

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?

Answer 1

Angular 1.x

ng-route:

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

ng-route: url (Location) based routing.

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.