Routeur AngularJS ui passant des données entre les états sans URL

Je suis confronté à ce problème de transmission de données entre deux états sans exposer les données dans l'url, c'est comme si l'utilisateur ne pouvait pas vraiment atterrir directement sur cet état.

Par exemple. J'ai deux états "A" et "B". Je fais un appel au serveur dans l'état "A" et je passe la réponse de l'appel à l'état "B". La réponse à l'appel du serveur est un message de chaîne, qui est assez long, donc je ne peux pas l'exposer dans l'URL.

Alors, y a-t-il un moyen dans le routeur angulaire ui de passer des données entre les états, sans utiliser de paramètres d'URL?

Nous pouvons utiliser params, nouvelle fonctionnalité de l'UI-Router:

Référence API / ui.router.state / $ stateProvider

paramsUne carte qui configure éventuellement les paramètres déclarés dans l'url, ou définit des paramètres supplémentaires non-url. Pour chaque paramètre en cours de configuration, ajoutez un objet de configuration associé au nom du paramètre.

Voir la partie: " ... ou définit des paramètres non-url supplémentaires ... "

Donc l'état def serait:

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

Peu d'exemples forment le document mentionné ci-dessus :

// 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 - exemple de travail: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Voici un exemple de définition d'état:

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

Cela pourrait être un appel utilisant 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>

Consultez l'exemple ici

L'objet params est inclus dans $ stateParams, mais ne fera pas partie de l'url.

1) Dans la configuration de l'itinéraire:

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

2) Dans le contrôleur:

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

3A) Modification de l'état d'un contrôleur

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

3B) Modification de l'état en html

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

Exemple Plunker