Reindirizza uno stato al sottostato predefinito con UI-Router in AngularJS

Sto creando una pagina basata su schede che mostra alcuni dati. Sto usando UI-Router in AngularJs per registrare gli stati.

Il mio scopo è avere una scheda predefinita aperta al caricamento della pagina. Ogni scheda ha sottoschede e vorrei avere una sottoscheda predefinita aperta quando si cambia scheda.

Stavo testando con la onEnterfunzione e all'interno lo sto usando $state.go('mainstate.substate');ma sembra non funzionare a causa di problemi di effetto loop (su state.go per substate chiama il suo stato genitore e così via, e si trasforma in un 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'}
})

Qui ho creato una demo di plunker .

Per ora tutto funziona, tranne che non ho la scheda predefinita aperta ed è esattamente quello che mi serve.

Grazie per i tuoi suggerimenti, opinioni e idee.

Aggiornare: 1.0 in poi Supporta il reindirizzamento a fuori dalla scatola.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

Ho creato un esempio qui .

Questa soluzione deriva da un simpatico "Commento" a un problema con il reindirizzamento utilizzando .when() ( https://stackoverflow.com/a/27131114/1679310 ) e una soluzione davvero interessante (di Chris T, ma il post originale era di yahyaKacem)

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

Quindi per prima cosa estendiamo main con l'impostazione di reindirizzamento:

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

E aggiungi solo queste poche righe in run

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'})
      }
    });
}]);

In questo modo possiamo regolare qualsiasi nostro stato con il suo reindirizzamento predefinito ... Controllalo qui

MODIFICA: aggiunta opzione dal commento di @Alec per preservare la cronologia del browser.

Infatti anche se questa soluzione proposta da Radim esattamente, avevo bisogno di ricordare la sottoscheda (stato) di ogni scheda.

Quindi ho trovato un'altra soluzione che fa la stessa cosa ma ricorda anche ogni sottostato di tabulazione.

Tutto quello che dovevo fare era installare ui-router-extra e utilizzare la funzione di reindirizzamento dello stato profondo :

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

Grazie!

A partire dalla versione 1.0 dell'interfaccia utente-router supporta una redirectToproprietà. Per esempio:

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

Dalla versione 1.0 di ui-router, è stato introdotto un hook predefinito utilizzando IHookRegistry.onBefore () come dimostrato nell'esempio Data Driven Default Substate in http://angular-ui.github.io/ui-router/feature-1.0/ interfaces / transaction.ihookregistry.html # onbefore

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  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 qualcuno viene qui per una risposta su come implementare un semplice reindirizzamento per uno stato e, come è successo a me, non ha la possibilità di utilizzare il nuovo router ...

Ovviamente di nuovo se puoi, la risposta di @bblackwo è fantastica:

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

Se non puoi, reindirizzalo manualmente:

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

Spero possa essere d'aiuto!