web-dev-qa-db-fra.com

AngularJS routeur ui 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 suis en train de faire un appel serveur dans l'état "A" et de passer 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, donc je ne peux pas l'exposer dans l'URL.

Donc, y a-t-il un moyen dans le routeur angular ui de transmettre des données entre états, sans utiliser les paramètres url?

angularjsparametersangular-ui-routerstate
143
vijay tyagi

Nous pouvons utiliser params, nouvelle fonctionnalité du routeur d'interface utilisateur:

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

params Une mappe qui configure éventuellement les paramètres déclarés dans l'URL ou définit des paramètres non-url supplémentaires. 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 d'autres paramètres non-url ... "

Donc, l'état définitif serait:

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

Quelques exemples de la doc 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>

Vérifiez l'exemple ici

183
Radim Köhler

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

1) Dans la configuration de la route:

$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

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

Exemple Plunker

36
WiredIn