AngularJS ui router passing data between states without URL

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 valueparams: {  param1: { value: "defaultValue" }}// shorthand default valuesparams: {  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

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