What is the difference between $routeProvider and $stateProvider?

Question

Please explain the difference between $routeProvider and $stateProvider in AngularJS.

Which is best practice?

Guarded

Answer 1

Both do the same work as they are used for routing purposes in SPA(Single Page Application).

1. Angular Routing - per $routeProvider docs

URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

HTML

<div ng-view></div>

Above tag will render the template from the $routeProvider.when() condition which you had mentioned in .config (configuration phase) of angular

Limitations:-

• The page can only contain single ng-view on page
• If your SPA has multiple small components on the page that you wanted to render based on some conditions, $routeProvider fails. (to achieve that, we need to use directives like ng-include, ng-switch, ng-if, ng-show, which looks bad to have them in SPA)
• You can not relate between two routes like parent and child relationship.
• You cannot show and hide a part of the view based on url pattern.

---

2. ui-router - per $stateProvider docs

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.

Multiple & Named Views

Another great feature is the ability to have multiple ui-views in a template.

While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nesting your views, and pairing those views with nested states.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

The majority of ui-router's power is it can manage nested state & views.

Pros

• You can have multiple ui-view on single page
• Various views can be nested in each other and maintained by defining state in routing phase.
• We can have child & parent relationship here, simply like inheritance in state, also you could define sibling states.
• You could change the ui-view="some" of state just by using absolute routing using @ with state name.
• Another way you could do relative routing is by using only @ to change ui-view="some". This will replace the ui-view rather than checking if it is nested or not.
• Here you could use ui-sref to create a href URL dynamically on the basis of URL mentioned in a state, also you could give a state params in the json format.

For more Information Angular ui-router

For better flexibility with various nested view with states, I'd prefer you to go for ui-router

Sponson

can someone please show me and difference and equivalence of this routeprovider and stateprovider in codes? – Jariah

@bleykFaust what do you mean by in the codes? the answer which I explained is in simple terms.. what part you don't understand? – Sponson

@PankajParkar, I'm using routeprovider, I wonder how can I change that to stateprovider? – Jariah

@bleykFaust then this is not answer to which you should look into.. this answer states difference $stateProvider & $routeProvider – Sponson

Can it solve the need to pre-load a page using routes? – Graphitize

Preload a page using route means? – Sponson

$routeProvider -> requires the ngRoute module (module by Angular) to be installed. $stateProvider -> requires the ui.router module (3rd Party module) to be installed. – Magen

Answer 2

Angular's own ng-Router takes URLs into consideration while routing, UI-Router takes states in addition to URLs.

States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.

While in ng-router, you have to be very careful about URLs when providing links via <a href=""> tag, in UI-Router you have to only keep state in mind. You provide links like <a ui-sref="">. Note that even if you use <a href=""> in UI-Router, just like you would do in ng-router, it will still work.

So, even if you decide to change your URL some day, your state will remain same and you need to change URL only at .config.

While ngRouter can be used to make simple apps, UI-Router makes development much easier for complex apps. Here its wiki.

Zak

Answer 3

$route: This is used for deep-linking URLs to controllers and views (HTML partials) and watches $location.url() in order to map the path from an existing definition of route.

When we use ngRoute, the route is configured with $routeProvider and when we use ui-router, the route is configured with $stateProvider and $urlRouterProvider.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });

Runyon