javascript - sref - Redireccionar un estado al subestado predeterminado con UI-Router en AngularJS

ui-router params

Question

Estoy creando una página basada en pestañas que muestra algunos datos. Estoy usando UI-Router en AngularJs para registrar estados.

Mi objetivo es tener una pestaña predeterminada abierta en la carga de la página. Cada pestaña tiene subpestañas, y me gustaría tener una subpestaña predeterminada abierta al cambiar las pestañas.

Estaba probando con la función onEnter y dentro estoy usando $state.go(''mainstate.substate''); pero parece que no funciona debido a problemas de efecto de bucle (en state.go para comprobar que llama a su estado padre y así sucesivamente, y se convierte en un bucle).

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

Aquí creé una demostración de plunker .

Por ahora todo funciona, excepto que no tengo la pestaña predeterminada abierta y eso es exactamente lo que necesito.

Gracias por sus sugerencias, opiniones e ideas.

Answer 1

A partir de la https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto del ui-router, admite una propiedad redirectTo . Por ejemplo:

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

Answer 2

De hecho, incluso si esta solución propuesta por Radim hizo exactamente el trabajo, necesitaba recordar cada subpestaña (estado) de cada pestaña.

Entonces encontré otra solución que hace lo mismo pero también recuerda cada subestado de pestañas.

Todo lo que tengo que hacer es instalar ui-router-extras y usar la función de redirección de estado profundo :

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

¡Gracias!

Answer 3

Desde la versión 1.0 de ui-router, se ha introducido un enlace predeterminado usando IHookRegistry.onBefore () como se demuestra en el ejemplo de Subestado predeterminado controlado por datos en 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);
});

Answer 4

Si alguien viene aquí para obtener una respuesta sobre cómo implementar una redirección simple para un estado y, como me sucedió a mí, no tiene la oportunidad de usar el nuevo enrutador ...

Obviamente, de nuevo, si puedes, la respuesta de @bblackwo es genial:

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

Si no puede, simplemente rediríjalo manualmente:

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

¡Espero que ayude!

Answer 5

Actualización: 1.0 en adelante Admite redirectTo fuera de la caja.

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

Creé un ejemplo aquí .

Esta solución proviene de un agradable "Comentario" a un problema con la redirección usando .when() ( https://.com/a/27131114/1679310 ) y una solución realmente genial para él (por Chris T, pero la publicación original fue por yahyaKacem)

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

En primer lugar, ampliemos main con la configuración de redirección:

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

Y agregue solo estas pocas líneas en ejecución

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 esta forma podemos ajustar cualquiera de nuestros estados con su redirección predeterminada ... Compruébelo aquí

EDITAR: opción agregada del comentario de @Alec para preservar el historial del navegador.

Answer 6

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })