SyntaxFix

[javascript] What is the difference between $routeProvider and $stateProvider?

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

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to angularjs

• AngularJs directive not updating another directive's scope • ERROR in Cannot find module 'node-sass' • CORS: credentials mode is 'include' • CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response • WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 • Print Html template in Angular 2 (ng-print in Angular 2) • $http.get(...).success is not a function • Angular 1.6.0: "Possibly unhandled rejection" error • Find object by its property in array of objects with AngularJS way • Error: Cannot invoke an expression whose type lacks a call signature

Examples related to angular-ui-router

• how to refresh page in angular 2 • Could not resolve '...' from state '' • AngularJS ui router passing data between states without URL • What is the difference between $routeProvider and $stateProvider? • How to pass parameters using ui-sref in ui-router to controller • Exposing the current state name with ui router • Clear History and Reload Page on Login/Logout Using Ionic Framework • Using $window or $location to Redirect in AngularJS • AngularJS UI Router - change url without reloading state • `ui-router` $stateParams vs. $state.params

Examples related to angularjs-routing

• What is the difference between $routeProvider and $stateProvider? • Changing route doesn't scroll to top in the new page • What is the difference between angular-route and angular-ui-router? • Can angularjs routes have optional parameter values? • Angular - ui-router get previous state • angularjs getting previous route path • How/when to use ng-click to call a route? • Delaying AngularJS route change until model loaded to prevent flicker