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?

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/

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:

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

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

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:

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