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


146

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?

Réponses:


185

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


Comme suggéré, j'ai essayé d'utiliser des paramètres sur un état imbriqué (Exemple - "/ user / profile / contacts", cela m'a donné une erreur. Dois-je également définir les "paramètres" pour l'état parent?
vijay tyagi

Il semble qu'il n'est pas nécessaire que le parent ait défini les paramètres, merci pour la réponse détaillée.
vijay tyagi

Génial si cela a aidé de toute façon;) profiter du puissant routeur UI
Radim Köhler

1
Malheureusement, cela ne fonctionne pas avec ui-router 0.2.10 et c'est ce que j'utilise, j'ai obtenu cette erreur en changeant la version en 0.2.10 - Erreur: paramètres invalides dans l'état `` home ''
vijay tyagi

1
@vijaytyagi, vous devriez mettre à jour. Simplement, il n'y a aucune raison de continuer à exécuter l'ancienne version. Et pour autant que je me souvienne, le mouvement devrait être fluide ...
Radim Köhler

38

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


1
Merci, parfait. Vous avez également remarqué que si vous voulez à la fois $ state et $ stateParams, il vous suffit d'injecter $ state. L'objet stateParams est une propriété de $ state: $ state.params.
Michael K

1
Il faut dire que l'étape 1 (fournir les valeurs par défaut) est nécessaire pour faire fonctionner le reste ;-)
Xtreme Biker

2
Merci pour l'exemple concis. Travaille pour moi! (UI-Router v 1.0.3)
Roboprog
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.