Ao aprender a usar o Angular, a UI-Route é uma das dificuldades. Não há nenhum problema com o uso simples, mas quando se trata de nidificação em vários níveis, sinto-me confuso. Procurei muitas informações e pisei em muitas armadilhas. Até agora, não posso dizer que tenho um entendimento abrangente da UI-Route; Aqui, acabei de gravar os poucos poços que preenchi.
1. Usando resumo:
$stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.php", method:"GET" }) } }, abstract: true, url:"/shop", templateUrl:"templates/shop/list.html", Controlador: "ShopListController"})Qual é o uso do uso de atributo abstrato? Descrição oficial: Resumo: True indica que esse estado não pode ser ativado explicitamente e só pode ser ativado implicitamente pelo subestado. Se você não puder ativar explicitamente, não poderá acessar essa rota de estado diretamente através de "/loja". Não é um beco sem saída? Qual é o sentido de fazer isso? Espere, vamos dar uma olhada na próxima frase: ela pode ser ativada escondida no estado da colcha, e parece que ainda pode estar vivo. Como isso pode fazê -lo viver? Vejamos o seguinte código:
.state ('shop.main', {url: "/: id", abstrato: true, templateurl: "modelos/shop/main2.html", controlador: "shopmainController"})Estado : "shop.main" é um subestado de loja. De acordo com a teoria, o shop.main pode ativar a loja. Precisamos apenas acessar: /Shop /1, para que possamos ativar a loja State e "Shop.main"
Não vamos estar com pressa. Acrescentarei um atributo abstrato para brincar com algumas coisas emocionantes. Vejamos o código a seguir no próximo nível:
.State ('shop.main.info', {url: "", templateurl: "modelos/shop/info.html", cache: 'false', controlador: "infontroller"}) .state ('shop.main.author', {url: "/autor", model: "ethora", ",", ",", ",", ",", ",", ",", ",", ",", ",", ", o", o ", o", o ", o", o ",", e o shop.main.author ", {url:"/autor "). .state ('shop.main.samebook', {url: "SameBook", modelo: "<div> SameBooksamebookSamebookSamebook </div>"})Vejo que o estado "shop.main.info" tem o URL do estado "" ", então precisamos acessar" Shop/1 "dessa maneira, todos os subestados padrão que podem ser usados como" shop.main ".
Neste momento, a relação de ninho do módulo é: list.html aninhada main.html, main.html info.html. Podemos ativar esse ninho de três camadas através do URL de "Shop/: ID".
2. Uso de parâmetros no controlador:
Não há dificuldade nisso. Injete o parâmetro URL "$ stateparams" no controlador e você pode obtê -lo neste objeto:
shop.Controller ("ShopMainController", ['$ scope', '$ stateparams', '$ rootscope', função ($ scope, $ stateparams, $ rootcope) {$ scope.pesons = [1,2,4,5,6]; cfPloadingbar.start ();}]);3. Como evitar o cache do modelo
Durante o processo de desenvolvimento, o cache do modelo afeta seriamente nossa depuração. Às vezes, o código é modificado, mas o modelo não muda. É muito angustiante. Só precisamos ouvir o Statechangesuccess e, em seguida, limpar o $ Templatecache. Aqui usamos o método Run para adicionar o ouvinte:
bookapp.run (['$ rootscope', '$ templatecache', função ($ rootscope, $ templatecache) {var statechangesuccess = $ rootscope.O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.