javascript - uirouter - ui view angular js
Router angular de UI: actualice ui-view anidado con carga lenta en el cambio de estado (1)
No estoy seguro de lo que está tratando de lograr, pero poner $state.go en el bloque de run fue una razón por la que funcionó la primera vez y en cualquier otro momento consecutivo.
La razón es que run Block se ejecuta solo una vez en el momento en que el módulo se carga y el módulo se carga una sola vez.
Para solucionar este movimiento, $state.go llama a testingCtrl y agrega $state como inyección de dependencia
Ver mi plunker fijo.
Soy nuevo en el uso de ui-router y tengo algunas dificultades con una ui-view anidada de carga lenta. He intentado una serie de cosas y aunque me imagino que me he acercado, no puedo hacer que funcione, por lo que quien arregle el plunker compartido a continuación recibirá la respuesta correcta.
-En primer lugar, require.js inicia la aplicación principal e index.html contiene dos vistas de usuario, una para la navegación y otra para la sección de contenido principal. La sección de contenido principal contiene varios elementos del portafolio (Prueba1 en plnkr) que están cargados de manera diferida (con ocLazyLoad) en la sección de contenido principal cuando se selecciona uno.
-El módulo de aplicación principal define los diversos estados en su método de configuración, incluido un estado para cargar el elemento de la cartera de acuerdo con su ID y en función de una convención de nomenclatura.
-Cuando se hace clic en Test1, su módulo principal está cargado de forma diferida, y este módulo define sus propios estados, y Test1 tiene su propio index.html con su propia ui-view anidada. Merece la pena señalar que también he tenido que usar el método de ejecución de este módulo para ejecutar una función que envuelve $ state.go en $ timeout, para que el contenido de la plantilla aparezca en la interfaz de usuario anidada cuando se hace clic inicialmente en Test1. Esto es hackoso e indudablemente no es el enfoque correcto y tal vez la fuente del problema, como veremos en breve. También traté de poner $ state.go en un servicio, pero no hizo la diferencia, ya que al final me encontré con el mismo problema.
-Por último, aquí es donde las cosas se rompen. Si desde Test1, hace clic en Inicio en el navegador principal y luego vuelve a hacer clic en Test1, no aparece el contenido de la plantilla que apareció previamente en la ui-view anidada (obviamente, dado que la función de ejecución del módulo solo se ejecuta una vez). Es fácil hacer que reaparezca haciendo clic manualmente en un enlace que vuelve a cargar el estado, pero obviamente esto no es deseable.
TL / DR - Inicio -> Haga clic en Prueba1 -> ¡Trabajando! -> Haga clic en Inicio -> Haga clic en Prueba1 -> ¡Breaks!
Módulo de aplicación principal y estados:
(function() {
angular.module(''myApp'', [
''ui.router'',
//''door3.css'',
''oc.lazyLoad''
])
.config(function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(''/'');
$stateProvider
.state(''root'', {
url: ''/'',
views: {
''nav'': {
templateUrl: ''views/static/nav.html''
},
''content'': {
templateUrl: ''views/portfolio.html''
}
}
})
.state(''root.home'', {
url: ''home'',
views: {
''content@'': {
templateUrl: ''views/portfolio.html''
}
}
})
.state(''root.about'', {
url: ''about'',
views: {
''content@'': {
templateUrl: ''views/about.html''
}
}
})
.state(''root.portfolio'', {
url: '':id'',
views: {
''content@'': {
// css: function($stateParams) {
// return ''/portfolio/'' + $stateParams.id + ''/css/master.css'';
// },
templateUrl: function($stateParams) {
return ''portfolio/'' + $stateParams.id + ''/index.html'';
},
resolve: {
load: function($stateParams, $ocLazyLoad) {
return $ocLazyLoad.load({
files: [''portfolio/'' + $stateParams.id + ''/js/mainModule.js'']
});
}
}
}
}
});
});
})();
El módulo principal de Test1 cargado perezoso y estados:
(function() {
angular.module(''testingApp'', [{
files: [
''portfolio/testing/controllers/testingCtrl.js''
]
}])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(''/'');
$stateProvider
.state(''root.portfolio.testing'', {
url: ''/'',
views: {
''[email protected]'': {
templateUrl: ''portfolio/testing/views/testfile.html'',
controller: ''testingCtrl'',
controllerAs: ''test''
}
}
})
})
.run(function($state, $timeout) {
$timeout(function() {
$state.go(''root.portfolio.testing'');
}, 0);
});
})();