javascript - Angular UI-Router $ urlRouterProvider. Cuando ya no funciona**

angularjs angular-ui-router

Question

Pregunta: ¿Por qué ya no funciona el .when() en mi $urlRouterProvider ?

He recogido una aplicación angular bastante robusta. El problema más reciente que he estado tratando de solucionar ha sido el problema de "credenciales de usuario perdidas en la actualización de la página".

El servicio de autenticación del proyecto no tenía mucho sentido cuando lo recogí y, después de investigar, supe que se había recopilado a partir de unas pocas páginas de código aleatorias. Tampoco funcionaba por completo, así que miré las diferentes fuentes y decidí implementar una de ellas ( angular-client-side-auth )

Ahora, el servicio / controlador de autenticación que he implementado son básicamente los mismos que se encuentran en la autenticación del lado del cliente angular , sin embargo, el sitio en el que estoy trabajando utiliza autenticación basada en token. La funcionalidad del token ya estaba básicamente instalada, por lo que no tuve ningún problema para que funcionara.

En este punto, tengo al usuario conectado en la actualización, las rutas funcionan junto con su autenticación (anteriormente utilizaba un código voluminoso para deshabilitar los elementos a la vista). Sin embargo, ahora el $urlRouterProvider .when() s está roto. Antes estaban funcionando perfectamente bien, así que sé que algo que he hecho es culpa, ¡pero no puedo simplemente deshacer lo que he implementado!

Así que este es el código $ urlRouterProvider que estoy usando. Vale la pena mencionar que he incluido / requerido el .when() , mientras que angular-client-side-auth no parece usarlos. Esperaba que pudieran haber sido implementados con ese código, sin embargo, ¿tal vez hay algo en él que anule la funcionalidad de .when() ? No lo pensé. También podría aclarar que tampoco estoy usando .rule o $httpProvider.interceptors allí. He intentado usar el sitio con estos implementados, pero no parecían hacer una diferencia.

$urlRouterProvider
.when(''/myState/group'', [''$state'', ''myService'', function ($state, myService) {
$state.go(''app.myState.group.id'', {id: myService.Params.id});
}])
.otherwise(''/'');

Básicamente, si el usuario o el sitio dirigen al usuario a /myState/group , deberían terminar en la url para el estado app.myState.group.id ¿no? No lo hacen, y no puedo entender por qué. No hay mucho por ahí en relación con los problemas de uso de urlRouterProvider.

Que pasa Bueno, la vista para /myState/group carga bien, y dentro de ella, <ui-view> es una lista generada de los id . Puede hacer clic en un ID, que llama a una función que establece el ID y luego ejecuta $state.go(''app.myState.group.id'', {id: group.id, std: $scope.std1}); Ese estado, por supuesto, reemplaza la ''lista generada'' en la que el usuario hizo clic.

Ahora, para el .state() ''s ...

.state(''app.myState'', {
abstract: true,
url: ''/myState'',
templateUrl: ''views/myState.html'',
data: {
access: access.user
},
controller: ''MyCtrl'',
resolve: {
// bunch of stuff here, I''ll include it if it''s relevant
},
redirectMap: {
''409'': ''app.error''
}
})
.state(''app.myState.group'', {
url: ''/group'',
templateUrl: ''views/myState.group.html'',
data: {
access: access.user
}
})
.state(''app.myState.group.id'', {
url: ''/:id'',
templateUrl: ''views/myState.group.id.html'',
data: {
access: access.user
},
resolve: {
'''': function (myService) {
myService.stuff.get(false, false, 7, 0).then(function (data) {
});
}
},
controller: ''MygroupidCtrl''
})

Finalmente, index.html

<li ng-class="{active: $state.includes(''app.myState'')}"> <a ui-sref="app.myState.group">My State</a> </li>

De alguna manera siento que hay una mejor manera de estructurar esto. Por lo que puedo decir, la app.myState.group nunca es realmente necesaria por sí misma , simplemente es parte del anidamiento.

He intentado simplemente cambiar el ui-sref a ="app.myState.group.id" . Cuando eso no funcionó, también cambié $state.includes(''app.myState'')} a $state.includes(''app.myState.group'')} . No ¿Es esto viable? Sé que tendría que pasar la identificación de alguna manera, pero ni siquiera parece estar dirigiendo.

Idealmente, me gustaría limitar la cantidad de estados innecesarios (y controladores ... y todo). Dado que se supone que el usuario debe ser llevado directamente a /myState/group/id cuando hace clic en el enlace, siento que eso debería suceder. No esta uniendo a otro estado y luego un redireccionamiento!

Dicho esto, me importa más simplemente hacer que esto funcione en este momento, y puedo preocuparme por limpiar las cosas más adelante.

EDITAR

Así que mientras escribía la pregunta conseguía algunas ideas más de cosas para probar. ¡Uno de ellos realmente funcionó!

.state(''app.myState.group'', {
url: ''/group'',
templateUrl: ''views/myState.group.html'',
data: {
access: access.user
},
onEnter: [''$state'', ''$timeout'', ''myService'', function ($state, $timeout, myService) {
$timeout(function () {
$state.go(''app.myState.group.id'', {id: myService.Params.id})
}, 1000);
}]

Me gusta, aunque todavía me pregunto si hay otras formas de hacerlo. ¡Todavía tengo curiosidad por la razón por la que el proveedor de $ urlRouter dejó de funcionar!

Answer 1

EDIT: versión 0.2.13 - cambio de última hora

El post original estaba trabajando con el UI-Router 0.2.12-. Una solución en 0.2.13 deshabilita esta solución. Por favor, siga la solución aquí:

Angular UI-Router $ urlRouterProvider. Cuando no estoy funcionando cuando hago clic en <a ui-sref="...">

ORIGINAL:

Hay un problema, encontré, causando un problema similar. Hay un ejemplo de trabajo con código completo.

En primer lugar, vamos a tener dos funciones para configurar

• $urlRouterProvider y
• $stateProvider

El fragmento de estas definiciones:

// when config for $urlRouterProvider
var whenConfig = [''$urlRouterProvider'', function($urlRouterProvider) {
$urlRouterProvider
.when(''/app/list'', [''$state'', ''myService'', function ($state, myService) {
$state.go(''app.list.detail'', {id: myService.Params.id});
}])
.otherwise(''/app'');
}];
// state config for $stateProvider
var stateConfig = [''$stateProvider'', function($stateProvider) {
$stateProvider
.state(''app'', {
url: ''/app'',
...
}];

Teniendo esto, el comportamiento reportado ocurrirá si los llamamos así:

angular.module(''MyApp'', [
''ui.router''
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig) 

La llamada de arriba no funcionará. Cuándo no activará el estado de detalle cuando se visita la lista.

Pero esto funcionará como se espera:

angular.module(''MyApp'', [
''ui.router''
])
// I. firstly WHEN
.config(whenConfig)
// II. only then call state config
.config(stateConfig)

Compruébalo aquí . Ver el archivo app.js ...

RESUMEN: Simplemente tenemos que configurar primero el $urlRouterProvider . Solo así podremos comenzar a completar nuestros estados a través de $stateProvider . Este enfoque conducirá al comportamiento esperado.