AngularJS ui router passing data between states wi

问题:

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 ?

回答1:

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

回答2:

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