Rediriger un état vers le sous-état par défaut avec UI-Router dans AngularJS

Je crée une page basée sur des onglets qui affiche certaines données. J'utilise UI-Router dans AngularJs pour enregistrer des états.

Mon objectif est d'avoir un onglet par défaut ouvert lors du chargement de la page. Chaque onglet a des sous-onglets, et je voudrais avoir un sous-onglet par défaut ouvert lors du changement d'onglet.

J'étais en train de tester avec la onEnterfonction et à l'intérieur que j'utilise, $state.go('mainstate.substate');mais cela ne semble pas fonctionner en raison de problèmes d'effet de boucle (sur state.go pour remplacer, il appelle son état parent et ainsi de suite, et il se transforme en boucle).

$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'}
})

Ici, j'ai créé une démo de plunker .

Pour l'instant, tout fonctionne, sauf que je n'ai pas l'onglet par défaut ouvert et c'est exactement ce dont j'ai besoin.

Merci pour vos suggestions, opinions et idées.

Mise à jour: 1.0 Prend en charge la redirection vers la sortie de la boîte.

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

J'ai créé un exemple ici .

Cette solution vient d'un joli "Commentaire" à un problème de redirection en utilisant .when() ( https://stackoverflow.com/a/27131114/1679310 ) et une solution vraiment cool pour cela (par Chris T, mais le message original était par yahyaKacem)

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

Alors tout d'abord, étendons main avec le paramètre de redirection:

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

Et n'ajoutez que ces quelques lignes dans la course

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

De cette façon, nous pouvons ajuster l'un de nos états avec sa redirection par défaut ... Vérifiez-le ici

EDIT: Ajout d'une option du commentaire de @Alec pour préserver l'historique du navigateur.

En fait, même si cette solution proposée par Radim faisait exactement le travail, je devais me souvenir du sous-onglet (état) de chaque onglet.

J'ai donc trouvé une autre solution qui fait la même chose mais se souvient également de chaque sous-état d'onglet.

Tout ce que j'ai à faire était d'installer ui-router-extras et d'utiliser la fonction de redirection d'état profond :

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

Je vous remercie!

Depuis la version 1.0 de l'interface utilisateur, il prend en charge une redirectTopropriété. Par exemple:

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

Depuis la version 1.0 de ui-router, un hook par défaut a été introduit en utilisant IHookRegistry.onBefore () comme illustré dans l'exemple Data Driven Default Substate dans http://angular-ui.github.io/ui-router/feature-1.0/ interfaces / transition.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");

    })

Si quelqu'un vient ici pour une réponse sur la façon d'implémenter une simple redirection pour un état et, comme cela m'est arrivé, n'a pas la possibilité d'utiliser le nouveau routeur ...

De toute évidence, si vous le pouvez, la réponse @bblackwo est excellente:

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

Si vous ne pouvez pas le rediriger manuellement:

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

J'espère que ça aide!