AngularJS ui router passing data between states without URL

Question

I am facing this problem of passing data between two states without exposing the data in the url, it's like user cannot really directly land on this state.

For example. I have two states "A" and "B". I am doing some server call in state "A" and passing the response of the call to state "B". The response of the server call is a string message, which is quite long, so i cannot expose that in the url.

So is there any way in angular ui router to pass data between states, without using url params ?

Radim Köhler · Accepted Answer · 2015-02-01T13:03:24.370

186

We can use params, new feature of the UI-Router:

API Reference / ui.router.state / $stateProvider

params A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.

See the part: "...or defines additional non-url parameters..."

So the state def would be:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

Few examples form the doc mentioned above:

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - working example: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Here is an example of a state definition:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

This could be a call using ui-sref:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

Check the example here

edited Feb 01 '15 at 13:03

answered Jan 31 '15 at 04:46

Radim Köhler

122,561
47
239
335

As suggested, i have tried using params on a nested state(Example - "/user/profile/contacts", it gave me some error. Do i need to define the "params" for parent state as well ? – vijay tyagi Feb 01 '15 at 10:38
It seems it is not necessary to have parent have the params defined, thanks for the detailed answer. – vijay tyagi Feb 01 '15 at 13:54
1

Unfortunately this doesn't work with ui-router 0.2.10 and that is what i am using, got this error on changing the version to 0.2.10 - Error: Invalid params in state 'home' – vijay tyagi Feb 04 '15 at 06:29
1

@vijaytyagi, you should upgrade. Simply, there is no reason to keep running old version. And as far as I remember, the move should be smooth... – Radim Köhler Feb 04 '15 at 06:52
Should `$state.go('parent', { veryLongParamParent: 123 });` also work? – Ilan Biala Apr 20 '15 at 00:50
@RadimKöhler Can we pass params using `$state.go` like @IIanBiala suggested? – gwin003 Jun 18 '15 at 14:41
@gwin003 (In case I do understand your question correctly) - as discussed here [Difference between ui-sref and $state.go in AngularJS UI-Router](http://stackoverflow.com/q/24526801/1679310) ui-sref and $state.go are in fact the same concept behind. So the answer is yes... – Radim Köhler Jun 18 '15 at 15:19
You can pass arbitrary objects this way, as well, as of v0.2.13 – ygesher Sep 06 '15 at 14:31
@Ryan.lay Agree! When you are on a customers\edit\1 page and do a page refresh the passed data is of course null. Thus this approach can NOT work for passing dynamic data from state1 to state2. – Elisabeth Dec 12 '15 at 14:39
@Elisabeth, passing not url params in SPA could work only inside of that "page" instance. URL params are solutions for any other scenario – Radim Köhler Dec 12 '15 at 14:41
I'm using FB api and getting token from the FB as a part of URL. I want to hide that token from the url. I tried with params but it won't work as expected. Can you help? – Jay Shukla Sep 27 '16 at 15:57

score 39 · Answer 2 · answered Oct 18 '16 at 17:06

The params object is included in $stateParams, but won't be part of the url.

1) In the route configuration:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) In the controller:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) Changing the State from a controller

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) Changing the State in html

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Example Plunker

Thanks, perfect. Also noticed that if you want both $state and $stateParams, you only need to inject $state. The stateParams object is a property of $state: $state.params. — Michael K, May 21 '17 at 20:47
It must be told that step 1 (providing default values) is required to make the rest of them work ;-) — Aritz, Jun 15 '17 at 13:44
Thank you for the concise example. Works for me! (UI-Router v 1.0.3) — Roboprog, Nov 09 '17 at 02:13

AngularJS ui router passing data between states without URL

2 Answers2

Linked

Related