Enrutador AngularJS ui que pasa datos entre estados sin URL
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?
Podemos utilizar params
la nueva característica del UI-Router:
Referencia de API / ui.router.state / $stateProvider
params
Un 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í
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