javascript - ejemplos - Angular: enrutador UI: agregue estados mediante programación
instalar angularjs (3)
¿Hay alguna manera de agregar estados mediante programación a $ stateProvider después de la configuración del módulo, por ejemplo, en el servicio?
Para agregar más contexto a esta pregunta, tengo una situación en la que puedo ir con dos enfoques:
- Intentar forzar la recarga en el estado definido en la configuración del módulo, el problema es que el estado tiene un reloadOnSearch configurado en falso , así que cuando pruebo $ state.go (''state.name'', {new: param}, {reload: cierto}); no pasa nada, ¿alguna idea?
Definición del estado
.state(''index.resource.view'', {
url: "/:resourceName/view?pageNumber&pageSize&orderBy&search",
templateUrl: "/resourceAdministration/views/view.html",
controller: "resourceViewCtrl",
reloadOnSearch: false,
})
- intente agregar programáticamente los estados que necesito cargar de un servicio para que el enrutamiento pueda funcionar correctamente. Prefiero ir con la primera opción si es posible.
Ver -edit- para información actualizada
Normalmente, los estados se agregan al $stateProvider durante la fase de configuración. Si desea agregar estados en tiempo de ejecución, deberá mantener una referencia al $stateProvider .
Este código no ha sido probado, pero debería hacer lo que quiera. Crea un servicio llamado runtimeStates . Puede inyectarlo en el código de tiempo de ejecución y luego agregar estados.
// config-time dependencies can be injected here at .provider() declaration
myapp.provider(''runtimeStates'', function runtimeStates($stateProvider) {
// runtime dependencies for the service can be injected here, at the provider.$get() function.
this.$get = function($q, $timeout, $state) { // for example
return {
addState: function(name, state) {
$stateProvider.state(name, state);
}
}
}
});
Implementé algunas cosas llamadas Future States en UI-Router Extras que se encargan de algunos de los casos de esquina para ti, como mapear URL a estados que aún no existen. Future States también muestra cómo puede cargar el código fuente para los estados de tiempo de ejecución. Eche un vistazo al código fuente para tener una idea de lo que está involucrado.
-edit- para UI-Router 1.0+
En UI-Router 1.0, los estados se pueden registrar y cancelar en tiempo de ejecución utilizando StateRegistry.register y StateRegistry.deregister .
Para obtener acceso a $stateRegistry , $stateRegistry como $stateRegistry , o inyecte $uiRouter y acceda a través de UIRouter.stateRegistry .
UI-Router 1.0 también incluye futuros estados listos para usar que manejan la carga diferida de las definiciones de estado, incluso la sincronización por URL.
¡Chris T lo clavó! El proveedor es el camino a seguir. No tiene que golpearlo en el objeto de la ventana, ahorrar, más protegido, etc.
Hacer una referencia cruzada de su respuesta con este artículo realmente ayudó: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/#provider
La solución hace que un módulo específico $ stateProvider durante el bloque de configuración sea accesible para otros módulos durante sus bloques de ejecución.
En mi situación, estoy generando dinámicamente estados de tablero según los permisos de un usuario.
Durante mi bloqueo de configuración, mi proveedor está configurado, pasando el stateProvider del módulo (para acceder más tarde).
//in dashboard.module.js
var dashboardModule = angular.module(''app.modules.dashboard'',[
''app.modules.dashboard.controllers'',
''app.modules.dashboard.services'',
''app.modules.dashboard.presentations.mileage''
])
.provider(''$dashboardState'', function($stateProvider){
this.$get = function(PATHS, $state){
return {
addState: function(title, controllerAs, templatePrefix) {
$stateProvider.state(''dashboard.'' + title, {
url: ''/'' + title,
views: {
''dashboardModule@dashboard'': {
templateUrl: PATHS.DASHBOARD + (templatePrefix ? templatePrefix + ''/'' : ''/'') + title + ''/'' + title + ''.view.html'',
controller: controllerAs ? controllerAs : null
}
}
});
}
}
}
});
Eso hará que mi proveedor de estado del Dashboard esté disponible para otros módulos, en lugar de presionarlo en la ventana.
Luego, en el bloque de ejecución (controlador) de mi módulo de usuario, puedo acceder al proveedor de estado del tablero e inyectar estados dinámicamente.
var UserControllers = angular.module(''app.modules.user.controllers'', [])
.controller("UserLoginController", ["$state", "$dashboardState", function($state, $dashboardState){
$dashboardState.addState(''faq'', null, ''content'');
$state.go(''dashboard.faq'');
}]);
Sí, es posible hacer esto, pero debido a que hay capas de almacenamiento en caché, es complejo. Alex Feinberg ha documentado una solución en su blog aquí:
El final del artículo incluye un ejemplo de creación de un estado utilizando stateProvider:
app.stateProvider.state(ent.lob.name.toLowerCase(), {
url: ''/'' + ent.lob.name.toLowerCase(),
controller: ent.lob.name.toLowerCase() + ''Controller'',
templateUrl: ''lobs/views/'' + ent.lob.name.toLowerCase() + ''.html''
});