$routeProvider vs $stateProvider in AngularJs

Posted on Updated on

angularjs$routeProvider vs $stateProvider in AngularJs

See overview and differences between $routeProvider and $stateProvide routing modules. Each module has some cons and pros are given below.

$routeProvider  :-

It exposes APIs that allow you to define routes for your application. It works on specifics URLs to a Controller and assign a Template page. Generally, template page is rendered inside <ng-view> elements on parent page. We can embed URLs in two way –  ng-href or href attribute.

Html code below :- 

<ul class="nav navbar-nav">
     <li><a href ng-href="/home">Home</a></li>
     <li><a href ng-href="/contact">Contact</a></li>
</ul>

Below are basic $routeProvider Implementation snippet :-

routeProvider-1
limitation:-

  • The Page can contain only one ng-view on Page.
  • $routeProvider don’t know about Parent/Child relationship.

It’s simple and easier to use.

$stateProvider:-

It works similar to $routeProvider but it purely focus on state rather than URLs. We can leverage lot of feature by using UI-Route provides:-

  • You can have multiple ui-view on single page
  • Various view can be nested in each other and maintain 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.
  • Other way you could relative routing using only @ to change ui-view="some", This will replace the ui-view rather than checking 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.

Doing this, you have to download angular-route-ui.js file.

Below have some Html code that defined different routing and routing scope like child and parent relationship.

<ul class=”nav navbar-nav”>
<li><a ui-sref=”home“>Home</a></li>
<li><a ui-sref=”home.listOfBook“>Books</a></li>
<li><a ui-sref=”home.login“>Login</a></li>
<li><a ui-sref=”about“>About Us</a></li>
</ul>

In about html page having two named section “columnOne” and “columnTwo” and each section has a Controller and View template attached in angular config( see Javascript ) to render the output inside respective     <ui-view> area.

aboutPage.html

stateProvider-html

Below are basic $stateProvider Implementation snippet :-

stateProvider-1

 

ref :

https://github.com/angular-ui/ui-router/wiki
https://docs.angularjs.org/tutorial/step_07
Thanks !!!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s