Redirecionar um estado para o subestado padrão com o roteador UI no AngularJS

Estou criando uma página baseada em guias que mostra alguns dados. Eu estou usando o roteador de interface do usuário em AngularJs para registrar estados.

Meu objective é ter uma guia padrão aberta no carregamento da página. Cada guia possui subguias e eu gostaria de ter uma subguia padrão aberta ao alterar as guias.

Eu estava testando com a function onEnter e dentro estou usando $state.go('mainstate.substate'); mas parece não funcionar devido a problemas de efeito de loop (em state.go para substate ele chama seu estado pai e assim por diante, e ele se transforma em um loop).

 $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', onEnter: function($state) { $state.go('main.street'); } }) .state('main.street', { url: '/street', templateUrl: 'submenu.html', params: {tabName: 'street'} }) 

Aqui eu criei uma demo plunker .

Por enquanto tudo funciona, exceto que eu não tenho aba padrão aberta e é exatamente disso que eu preciso.

Obrigado por suas sugestões, opiniões e idéias.

Eu criei um exemplo aqui .

Esta solução vem de um bom “comentário” para um problema com o redirecionamento usando .when() ( https://stackoverflow.com/a/27131114/1679310 ) e solução muito legal para ele (por Chris T, mas o post original foi por yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

Então, primeiro vamos estender main com a configuração de redirecionamento:

 $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', redirectTo: 'main.street', }) 

E adicione apenas algumas linhas para executar

 app.run(['$rootScope', '$state', function($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(evt, to, params) { if (to.redirectTo) { evt.preventDefault(); $state.go(to.redirectTo, params, {location: 'replace'}) } }); }]); 

Desta forma, podemos ajustar qualquer um dos nossos estados com o seu redirecionamento padrão … Confira aqui

EDIT: Adicionado opção de comentário por @Alec para preservar o histórico do navegador.

Na verdade, mesmo que essa solução proposta por Radim fizesse exatamente o trabalho, eu precisava lembrar da subguia (estado) de cada guia.

Então eu encontrei outra solução que faz a mesma coisa, mas também se lembra de cada subestado tab.

Tudo o que tenho a fazer foi instalar ui-router-extras e usar o recurso de redirecionamento de estado profundo :

 $stateProvider .state('main.street', { url: '/main/street', templateUrl: 'main.html', deepStateRedirect: { default: { state: 'main.street.cloud' } }, }); 

Obrigado!

A partir da versão 1.0 do roteador ui, ele suporta uma propriedade redirectTo . Por exemplo:

 .state('A', { redirectTo: 'AB' }) 

Desde a versão 1.0 do ui-router, um gancho padrão foi introduzido usando IHookRegistry.onBefore (), conforme demonstrado no exemplo Subestado Padrão baseado em dados em http://angular-ui.github.io/ui-router/feature-1.0/ interfaces / transition.ihookregistry.html # onbefore

 // state declaration { name: 'home', template: '
', defaultSubstate: 'home.dashboard' } var criteria = { to: function(state) { return state.defaultSubstate != null; } } $transitions.onBefore(criteria, function($transition$, $state) { return $state.target($transition$.to().defaultSubstate); });
 app.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.when("/state","/state/sub-state"); }) 

Se alguém vier aqui para uma resposta sobre como implementar um redirecionamento simples para um estado e, como aconteceu comigo, não tem a oportunidade de usar o novo roteador …

Obviamente, se você puder, a resposta do @bblackwo é ótima:

 $stateProvider.state('A', { redirectTo: 'B', }); 

Se você não pode, então, apenas redirecioná-lo manualmente:

 $stateProvider.state('A', { controller: $state => { $state.go('B'); }, }); 

Espero que ajude!