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!