El enrutador ui AngularJS pasa datos entre estados sin URL


146

Me enfrento a este problema de pasar datos entre dos estados sin exponer los datos en la URL, es como si el usuario realmente no pudiera aterrizar directamente en este estado.

Por ejemplo. Tengo dos estados "A" y "B". Estoy haciendo una llamada al servidor en el estado "A" y pasando la respuesta de la llamada al estado "B". La respuesta de la llamada al servidor es un mensaje de cadena, que es bastante largo, por lo que no puedo exponerlo en la url.

Entonces, ¿hay alguna forma en el enrutador ui angular para pasar datos entre estados, sin usar los parámetros de url?

Respuestas:


185

Podemos usar params, nueva característica del UI-Router:

Referencia de API / ui.router.state / $ stateProvider

paramsUn mapa que opcionalmente configura parámetros declarados en la url, o define parámetros adicionales que no son url. Para cada parámetro que se esté configurando, agregue un objeto de configuración con clave al nombre del parámetro.

Consulte la parte: " ... o define parámetros adicionales que no son URL ... "

Entonces el estado def sería:

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

Pocos ejemplos forman el documento mencionado anteriormente :

// 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: "~"
  } }

EXTENDER - ejemplo de trabajo: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Aquí hay un ejemplo de una definición de estado:

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

Esto podría ser una llamada usando 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>

Mira el ejemplo aquí


Como sugerí, he intentado usar parámetros en un estado anidado (Ejemplo - "/ usuario / perfil / contactos", me dio un error. ¿
Debo

Parece que no es necesario que los padres tengan definidos los parámetros, gracias por la respuesta detallada.
vijay tyagi 01 de

Genial si eso ayudó de alguna manera;) disfruta del poderoso UI-Router
Radim Köhler

1
Desafortunadamente, esto no funciona con ui-router 0.2.10 y eso es lo que estoy usando, recibí este error al cambiar la versión a 0.2.10 - Error: Parámetros no válidos en el estado 'home'
vijay tyagi

1
@vijaytyagi, deberías actualizar. Simplemente, no hay razón para seguir ejecutando la versión anterior. Y hasta donde recuerdo, el movimiento debería ser suave ...
Radim Köhler

38

El objeto params está incluido en $ stateParams, pero no formará parte de la url.

1) En la configuración de ruta:

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

2) En el controlador:

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

3A) Cambiar el estado de un controlador

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

3B) Cambiar el estado en html

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

Plunker de ejemplo


1
Gracias perfecto También noté que si quieres $ state y $ stateParams, solo necesitas inyectar $ state. El objeto stateParams es una propiedad de $ state: $ state.params.
Michael K

1
Debe tenerse en cuenta que el paso 1 (que proporciona valores predeterminados) es necesario para que el resto funcione ;-)
Xtreme Biker

2
Gracias por el conciso ejemplo. ¡Funciona para mi! (UI-Router v 1.0.3)
Roboprog el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.