AngularJS routeur d’interface utilisateur transmettant des données entre é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 atterrir directement sur cet état.

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

Y a-t-il un moyen quelconque dans le routeur ui angular de transmettre des données entre les états, sans utiliser les parameters url?

Nous pouvons utiliser les params , nouvelle fonctionnalité du routeur UI:

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

params Une carte qui configure éventuellement les parameters déclarés dans l’url, ou définit des parameters non-url supplémentaires. Pour chaque paramètre en cours de configuration, ajoutez un object de configuration indexé au nom du paramètre.

Voir la partie: ” … ou définit des parameters non-url supplémentaires …

Donc, l’état def serait:

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

Quelques exemples du 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:

 home parent parent.child 

Consultez l’exemple ici

L’object 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) Changer l’État d’un contrôleur

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

3B) Changer l’état en html

 

Exemple Plunker