ui-router stateParams vs state params

Question

With ui-router  it s possible to inject either  state or  stateParams into a controller to get access to parameters in the URL  However  accessing parameters through  stateParams only exposes parameters belonging to the state managed by the controller that accesses it  and its parent states  while  state params has all parameters  including those in any child states   Given the following code  if we directly load the URL http   path 1 paramA paramB  this is how it goes when the controllers load    stateProvider state  a          url   path  id  anotherParam         controller   ACtrl           stateProvider state  a b          url     yetAnotherParam        controller   ABCtrl          module controller  ACtrl   function  stateParams   state        state params     has id  anotherParam  and yetAnotherParam     stateParams      has id and anotherParam    module controller  ABCtrl   function  stateParams   state        state params     has id  anotherParam  and yetAnotherParam     stateParams      has id  anotherParam  and yetAnotherParam     The question is  why the difference  And are there best practices guidelines around when and why you should use  or avoid using either of them

User · Answer

An interesting observation I made while passing previous state params from one route to another is that $stateParams gets hoisted and overwrites the previous route's state params that were passed with the current state params, but using $state.params doesn't.

When using $stateParams:

var stateParams        = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}

When using $state.params:

var stateParams        = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}

User · Answer

There are many differences between these two  But while working practically I have found that using   state params better  When you use more and more parameters this might be confusing to maintain in  stateParams  where if we use multiple params which are not URL param  state is very useful      state  shopping-request           url    shopping-request  cartId          data   requireLogin  true         params    role  null         views                 templateUrl   views templates main tpl html   controller   ShoppingRequestCtrl             body shopping-request    templateUrl   views shops shopping-request html             footer shopping-request    templateUrl   views templates footer tpl html             header shopping-request    templateUrl   views templates header tpl html

User · Answer

Here in this article is clearly explained  The  state service provides a number of useful methods for manipulating the state as well as pertinent data on the current state  The current state parameters are accessible on the  state service at the params key  The  stateParams service returns this very same object  Hence  the  stateParams service is strictly a convenience service to quickly access the params object on the  state service   As such  no controller should ever inject both the  state service and its convenience service   stateParams  If the  state is being injected just to access the current parameters  the controller should be rewritten to inject  stateParams instead

User · Answer

Another reason to use  state params is for non-URL based state  which  to my mind  is woefully underdocumented and very powerful   I just discovered this while googling about how to pass state without having to expose it in the URL and answered a question elsewhere on SO   Basically  it allows this sort of syntax    lt a ui-sref  toState thingy   class  list-group-item  ng-repeat  thingy in thingies  gt    thingy referer    lt  a gt

User · Answer

The documentation reiterates your findings here  https   github com angular-ui ui-router wiki URL-Routing stateparams-service  If my memory serves   stateParams was introduced later than the original  state params  and seems to be a simple helper injector to avoid continuously writing  state params   I doubt there are any best practice guidelines  but context wins out for me  If you simply want access to the params received into the url  then use  stateParams  If you want to know something more complex about the state itself  use  state

User · Answer

I have a root state which resolves sth  Passing  state as a resolve parameter won t guarantee the availability for  state params  But using  stateParams will   var rootState         name   root       url     stubCompanyId       abstract  true                 case 1  rootState resolve         authInit    AuthenticationService     state   function  AuthenticationService   state            console log  rootState resolve    state params           return AuthenticationService init  state params                output     rootState resolve Object        case 2  rootState resolve         authInit    AuthenticationService     stateParams   function  AuthenticationService   stateParams            console log  rootState resolve    stateParams           return AuthenticationService init  stateParams                output     rootState resolve Object  stubCompanyId        Using  angular     1 4 0    angular-ui-router     0 2 15

User · Answer

EDIT  This answer is correct for version 0 2 10  As  Alexander Vasilyev pointed out it doesn t work in version 0 2 14   Another reason to use  state params is when you need to extract query parameters like this    stateProvider state  a       url   path  id  anotherParam  yetAnotherParam     controller   ACtrl        module controller  ACtrl   function  stateParams   state       state params     has id  anotherParam  and yetAnotherParam    stateParams      has id and anotherParam

[angularjs] `ui-router` $stateParams vs. $state.params

Examples related to angularjs

Examples related to angular-ui-router