Angular UI-Router $ urlRouterProvider .quando não está mais funcionando *

Pergunta: Por que o .when() no meu $urlRouterProvider funciona mais?

Eu peguei um aplicativo angular bastante robusto. O problema mais recente que tenho tentado resolver é o problema de ‘credenciais de usuário perdidas na atualização da página’.

O serviço de autenticação do projeto não fez muito sentido quando o peguei e, depois de pesquisar, descobri que ele foi compilado a partir de algumas páginas aleatórias de código. Ele também não estava funcionando completamente, então eu olhei para as diferentes fonts e decidi implementar completamente uma delas ( auth do lado do cliente )

Agora, o serviço / controlador de autenticação que implementei é basicamente o mesmo que está em autenticação do lado do cliente angular , no entanto, o site em que estou trabalhando usa a autenticação baseada em token. A funcionalidade do token já estava basicamente no lugar, então eu não tive nenhum problema para fazer isso funcionar.

Neste ponto, eu tenho o usuário ficar logado em atualização, as rotas estão trabalhando junto com sua autenticação (anteriormente estava usando código volumoso para desativar elementos em vista) No entanto, agora o $urlRouterProvider .when() s estão quebrados. Eles estavam funcionando perfeitamente bem antes, então sei que algo que fiz foi errar – mas não posso simplesmente desfazer o que implementei!

Portanto, este é o código $ urlRouterProvider que estou usando. Vale a pena mencionar que incluí / .when() o .when() , ao passo que a autenticação do lado do cliente angular não parece usá-los. Eu esperava que eles poderiam ter sido implementados com esse código, no entanto, talvez haja algo nele que anule a funcionalidade de .when() ? Eu não penso assim. Pode também esclarecer que eu não estou usando o .rule ou $httpProvider.interceptors lá ainda. Eu tentei usar o site com estas implementadas, mas elas não pareciam fazer diferença.

 $urlRouterProvider .when('/myState/group', ['$state', 'myService', function ($state, myService) { $state.go('app.myState.group.id', {id: myService.Params.id}); }]) .otherwise('/'); 

Então, basicamente, se o usuário ou site direciona o usuário para /myState/group , eles devem realmente acabar no url para o estado app.myState.group.id certo? Eles não fazem, e eu não consigo descobrir o porquê. Não há muito por aí em relação a problemas usando o urlRouterProvider.

O que acontece? Bem, a exibição para /myState/group carregada /myState/group e, dentro dela, é uma lista gerada dos id . Você pode clicar em um ID, que chama uma function que define o ID e, em seguida, executa $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); Esse estado naturalmente substitui a “lista gerada” em que o usuário clicou.

Agora, para o .state() ‘s …

 .state('app.myState', { abstract: true, url: '/myState', templateUrl: 'views/myState.html', data: { access: access.user }, controller: 'MyCtrl', resolve: { // bunch of stuff here, I'll include it if it's relevant }, redirectMap: { '409': 'app.error' } }) .state('app.myState.group', { url: '/group', templateUrl: 'views/myState.group.html', data: { access: access.user } }) .state('app.myState.group.id', { url: '/:id', templateUrl: 'views/myState.group.id.html', data: { access: access.user }, resolve: { '': function (myService) { myService.stuff.get(false, false, 7, 0).then(function (data) { }); } }, controller: 'MygroupidCtrl' }) 

Finalmente, index.html

  • My State
  • De alguma forma eu sinto que há uma maneira melhor de estruturar isso. Pelo que eu posso dizer, o app.myState.group nunca é realmente necessário por si só , é simplesmente parte do aninhamento.

    Eu tentei simplesmente mudar o ui-sref para ="app.myState.group.id" . Quando isso não funcionou, eu também mudei $state.includes('app.myState')} para $state.includes('app.myState.group')} . Não. Isso é viável? Eu sei que teria que passar o ID de alguma forma, mas nem parece estar direcionando.

    Idealmente, gostaria de limitar a quantidade de estados desnecessários (e controladores … e tudo). Como o usuário deve ser levado diretamente para /myState/group/id quando clicar no link, acho que isso deve acontecer. Não esta ligando para outro estado e, em seguida, um redirecionamento!

    Dito isso, eu me preocupo mais em simplesmente fazer com que isso funcione no momento, e posso me preocupar em limpar as coisas mais tarde.

    EDITAR

    Então, enquanto eu estava escrevendo a pergunta, eu estava conseguindo mais algumas idéias para tentar. Um deles realmente funcionou!

     .state('app.myState.group', { url: '/group', templateUrl: 'views/myState.group.html', data: { access: access.user }, onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) { $timeout(function () { $state.go('app.myState.group.id', {id: myService.Params.id}) }, 1000); }] 

    Eu gosto disso, embora eu ainda me pergunte se há outras maneiras de fazer isso. Ainda estou curioso para saber por que o $ urlRouterProvider parou de funcionar!

    EDIT: versão 0.2.13 – quebra de mudança

    A postagem original estava trabalhando com o roteador de interface do usuário 0.2.12-. Uma correção no 0.2.13 desativa essa solução. Por favor, siga a solução aqui:

    Roteador da interface do usuário angular $ urlRouterProvider .quando não estiver funcionando quando clico em

    ORIGINAL:

    Há um problema, descobri, causando um problema semelhante. Há um exemplo de trabalho com código completo

    Em primeiro lugar, vamos ter duas funções para configurar

    • $urlRouterProvider e
    • $stateProvider

    O trecho dessas definições:

     // when config for $urlRouterProvider var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) { $urlRouterProvider .when('/app/list', ['$state', 'myService', function ($state, myService) { $state.go('app.list.detail', {id: myService.Params.id}); }]) .otherwise('/app'); }]; // state config for $stateProvider var stateConfig = ['$stateProvider', function($stateProvider) { $stateProvider .state('app', { url: '/app', ... }]; 

    Tendo isso, o comportamento relatado ocorrerá se os chamarmos assim:

     angular.module('MyApp', [ 'ui.router' ]) // I. firstly the states .config(stateConfig) // II. then the WHEN .config(whenConfig) 

    A chamada acima não funcionará. Quando não acionar o estado de detalhe quando a lista é visitada.

    Mas isso funcionará como esperado:

     angular.module('MyApp', [ 'ui.router' ]) // I. firstly WHEN .config(whenConfig) // II. only then call state config .config(stateConfig) 

    Confira aqui . Veja o arquivo app.js

    RESUMO: Basta configurar primeiro o $urlRouterProvider . Só então poderemos começar a preencher nossos estados via $stateProvider . Essa abordagem levará ao comportamento esperado.