angularjs - sref - ng-src angular 5

El enrutador ui AngularJS pasa datos entre estados sin URL

Question

Estoy enfrentando este problema de pasar datos entre dos estados sin exponer los datos en la url, es como si el usuario 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?

Answer 1

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

Answer 2

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

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

params Un 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 configura, 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 http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info