$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.
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 :-
- 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.
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-viewon 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
ui-view="some", This will replace the
ui-viewrather than checking it is nested or not.
- Here you could use
ui-srefto create a
hrefURL dynamically on the basis of
URLmentioned 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=”about“>About Us</a></li>
Below are basic $stateProvider Implementation snippet :-