What is the difference between routeProvider and stateProvider

Question

Please explain the difference between  routeProvider and  stateProvider in AngularJS   Which is best practice

User · Answer

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  lt a href    gt  tag  in UI-Router you have to only keep state in mind  You provide links like  lt a ui-sref    gt   Note that even if you use  lt a href    gt  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

User · Answer

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    lt div ng-view gt  lt  div gt    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  amp  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    lt div ui-view gt       lt div ui-view  header  gt  lt  div gt       lt div ui-view  content  gt  lt  div gt       lt div ui-view  footer  gt  lt  div gt   lt  div gt    The majority of ui-router s power is it can manage nested state  amp  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  amp  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

User · Answer

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    lt div ng-view gt  lt  div gt       routeProvider          when   contact                  templateUrl   app views core contact contact html               controller   ContactCtrl                 lt div ui-view gt       lt div ui-view  abc  gt  lt  div gt       lt div ui-view  abc  gt  lt  div gt      lt  div gt       stateProvider          state  contact                 url    contact                templateUrl    app Aisel Contact views contact html               controller   ContactCtrl

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

Examples related to javascript

Examples related to angularjs

Examples related to angular-ui-router

Examples related to angularjs-routing