Al aprender a usar Angular, UI-Route es una de las dificultades. No hay problema con el uso simple, pero cuando se trata de anidación de niveles múltiples, me siento confundido. He buscado mucha información y pisé muchas trampas. Hasta ahora, no puedo decir que tenga una comprensión integral de UI-Route; Aquí solo grabo los pocos pozos que llené.
1.SUNINing Resumen:
$ stateProvider .state ('shop', {resolve: {"shopList": function ($ http) {return $ http ({url: "/bookApp/data/shopList.php", método: "get"})}}, abstracto: verdadero, "/shop", TemplateUrl: "Templates/shop/list.html", ",", ",", ",", ",", ". Controlador: "ShopListController"})¿De qué sirve el uso del atributo abstracto? Descripción oficial: Resumen: Verdadero indica que este estado no puede activarse explícitamente y solo puede ser activado implícitamente por el subestado. Si no puede activarse explícitamente, no puede acceder a esta ruta de estado directamente a través de "/taller". ¿No es un callejón sin salida? ¿Cuál es el punto de hacer eso? Espera, echemos un vistazo a la próxima oración: se puede activar oculto en el estado de la colcha, y parece que todavía puede estar vivo. ¿Cómo puede hacerlo en vivo? Veamos el siguiente código:
.state ('shop.main', {url: "/: id", abstracto: true, templateUrl: "Templates/shop/main2.html", controlador: "ShopMainController"})Estado : "Shop.Main" es un subestado de la tienda. Según la teoría, Shop.Main puede activar la tienda. Solo necesitamos acceder a: /tienda /1, para que podamos activar Shop State y "Shop. Mine"
No tengamos prisa. Agregaré un atributo abstracto para jugar con algunas cosas emocionantes. Veamos el siguiente código en el siguiente nivel:
.state ('shop.main.info', {url: "", TemplateUrl: "Templates/shop/info.html", caché: 'falso', controlador: "infocontroller"}) .state ('shop.main.author', {url: "/autor", Template: "<Siv> autorauthorauthorauthorauthora ' }) .State ('shop.main.sameBook', {url: "SameBook", plantilla: "<Div> SameBookSameBookSameBookSameBook </div>"})Veo que el estado "shop.main.info" tiene la URL del estado "" ", por lo que solo necesitamos acceder a" Shop/1 "de esta manera todos los subtatos predeterminados que pueden usarse como" Shop.Main ".
En este momento, la relación de anidación del módulo es: list.html anidada main.html, main.html Nested Info.html. Podemos activar esta anidación de tres capas a través de la URL de "Shop/: ID".
2. Uso de parámetros en el controlador:
No hay dificultad en esto. Inyectar el parámetro URL "$ StateParams" en el controlador y puede obtenerlo en este objeto:
Shop.Controller ("ShopMainController", ['$ Scope', '$ stateParams', '$ rootscope', function ($ scope, $ stateParams, $ rootscope) {$ scope.persons = [1,2,3,4,5,6]; $ scope.good = {id: $ stateparams.id} cfPloadingBar.start ();}]);3. Cómo evitar la caché de la plantilla
Durante el proceso de desarrollo, la caché de plantilla afecta seriamente nuestra depuración. A veces el código se modifica, pero la plantilla no cambia en absoluto. Es muy angustiante. Solo necesitamos escuchar statechangesuccess y luego borrar $ TemplateCache. Aquí usamos el método Ejecutar para agregar el oyente:
bookApp.run (['$ rootscope', '$ TemplateCache', function ($ rootscope, $ templateCache) {var statechangesuccess = $ rootscope. $ on ('$ statechangesuccess', statechangesuccess); function statechAnsuccess ($ rootscope) {$ templateCache.ReMoveAll ();}}}}}}}}}}}}}}}}}});Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.