Enrutador AngularJS ui que pasa datos entre estados sin URL

Resuelto vijay tyagi asked hace 9 años • 2 respuestas

Me enfrento al problema de pasar datos entre dos estados sin exponer los datos en la URL, es como si el usuario no pudiera llegar directamente a 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 angular ui de pasar datos entre estados, sin usar parámetros de URL?

vijay tyagi avatar Jan 31 '15 11:01 vijay tyagi
Aceptado

Podemos utilizar paramsla nueva característica del UI-Router:

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

paramsUn mapa que opcionalmente configura los parámetros declarados en la URL o define parámetros adicionales que no son de la URL. Para cada parámetro que se configure, agregue un objeto de configuración codificado con el nombre del parámetro.

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

Entonces la definición del estado sería:

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

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

EXTEND - ejemplo práctico: 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, },
      ...
  })

Esta 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í

Radim Köhler avatar Jan 31 '2015 04:01 Radim Köhler

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 desde 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>

Ejemplo de plomero

WiredIn avatar Oct 18 '2016 17:10 WiredIn