Please explain the difference between $routeProvider
and $stateProvider
in AngularJS.
Which is best practice?
$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.
AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. We have to download angular-route. js script that contains the ngRoute module from AngularJS official website to use the routing feature. You can also use the CDN in your application to include this file.
Both do the same work as they are used for routing purposes in SPA(Single Page Application).
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:-
ng-view
on page$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)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 view
s, 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
ui-view
on single pageui-view="some"
of state just by using absolute routing using @
with state name.@
to change ui-view="some"
. This will replace the ui-view
rather than checking if it is nested or not.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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With