Roteador da interface do usuário AngularJS transmitindo dados entre estados sem URL


146

Estou enfrentando esse problema de transmitir dados entre dois estados sem expor os dados no URL, é como se o usuário não pudesse realmente pousar diretamente nesse estado.

Por exemplo. Eu tenho dois estados "A" e "B". Estou fazendo uma chamada de servidor no estado "A" e passando a resposta da chamada para o estado "B". A resposta da chamada do servidor é uma mensagem de seqüência de caracteres, que é bastante longa, portanto, não posso expor isso no URL.

Então, existe alguma maneira no roteador ui angular de transmitir dados entre estados, sem usar parâmetros de URL?

Respostas:


185

Podemos usar params, novo recurso do UI-Router:

Referência da API / ui.router.state / $ stateProvider

paramsUm mapa que opcionalmente configura parâmetros declarados no URL ou define parâmetros adicionais que não são do URL. Para cada parâmetro que está sendo configurado, adicione um objeto de configuração com chave ao nome do parâmetro.

Veja a parte: " ... ou define parâmetros adicionais que não são de URL ... "

Portanto, o estado def seria:

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

Poucos exemplos formam o documento mencionado acima :

// 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 - exemplo de trabalho: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Aqui está um exemplo de uma definição 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, },
      ...
  })

Pode ser uma chamada 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>

Veja o exemplo aqui


Como sugerido, tentei usar parâmetros em um estado aninhado (exemplo - "/ usuário / perfil / contatos", isso me deu algum erro. Preciso definir os "parâmetros" para o estado pai também?
vijay tyagi

Parece que não é necessário que os pais tenham os parâmetros definidos, obrigado pela resposta detalhada.
Vijay Tyagi

Ótimo se que ajudou de qualquer maneira;) aproveitar poderoso UI-Router
Radim Köhler

1
Infelizmente isso não funciona com o ui-router 0.2.10 e é isso que estou usando, obtive esse erro ao alterar a versão para 0.2.10 - Erro: Parâmetros inválidos no estado 'home'
vijay tyagi

1
@vijaytyagi, você deve atualizar. Simplesmente, não há razão para continuar executando a versão antiga. E, tanto quanto me lembro, o movimento deve ser suave ...
Radim Köhler

38

O objeto params está incluído em $ stateParams, mas não fará parte do URL.

1) Na configuração da rota:

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

2) No controlador:

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

3A) Mudando o estado de um controlador

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

3B) Mudando o estado em html

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

Exemplo Plunker


1
Obrigado, perfeito. Observe também que, se você quiser $ state e $ stateParams, precisará injetar apenas $ state. O objeto stateParams é uma propriedade de $ state: $ state.params.
Michael K

1
Deve ser dito que a etapa 1 (fornecendo valores padrão) é necessário para fazer o resto deles trabalho ;-)
Xtreme Biker

2
Obrigado pelo exemplo conciso. Funciona para mim! (UI-Router v 1.0.3)
Roboprog
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.