Roteamento angularJS
Ser capaz de pular de uma visão de uma página para outra é crucial para aplicativos de uma página única. À medida que os aplicativos se tornam cada vez mais complexos, precisamos de uma maneira razoável de gerenciar as interfaces que os usuários veem durante o uso. O AngularJS pratica para dividir a visualização nas visualizações de layout e modelo e exibir a visualização correspondente de acordo com a URL atualmente acessada pelo usuário.
Este artigo fornece um exemplo simples de roteamento do AngularJS e menciona alguns dos conceitos que envolve.
1. Página de layout
Scripts de citação:
<script src = "../ scripts/jQuery-1.9.1.min.js"> </sCript> <script src = "../ scripts/angular.min.js"> </sCript> <script src = "../ scripts/angular-soute.min.js"> </script>
O layout da página é relativamente simples:
<div> <ul> <li> <a href = "#página1"> vá página 1 </a> </li> <li> <a href = "#página2"> vá página 2 </a> </li> <li> <a href = "#" outros "> para outra página </a> </li> </ul> </div =
NG-View é uma diretiva especial fornecida pelo módulo NGROUTE que informa ao AngularJS onde renderizar o modelo. Neste exemplo, colocamos o conteúdo que precisamos renderizar na divindra abaixo. Os três links acima apontam para três visualizações de visualização, respectivamente.
2. Página do modelo
Crie duas páginas de modelo, chamadas Subpage_1.html e Subpage_2.html, respectivamente.
3. Regras de roteamento de roteamento Config
angular.module("myRouteApp", ["ngRoute"]) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when("/page1", { templateUrl: "Subpage_1.html" }) .when("/page2", { templateUrl: "Subpage_2.html" }) .oTerwise ({redirectTo: "/"});Carregue o módulo NGROUTE como uma dependência em nosso aplicativo. Use a função de configuração para definir rotas em módulos ou aplicativos e use os dois métodos fornecidos pelo AngularJS para definir rotas para aplicativos.
templateurl:
O aplicativo lê a exibição através do XHR (ou lê de $ templatecache) com base no caminho especificado pela propriedade TemplateUrl. Se esse modelo puder ser encontrado e lido, o AngularJS renderiza o conteúdo do modelo em um elemento DOM com a diretiva NG-View.
RedirectTo:
Se o valor da propriedade RedirectTo for uma string, o caminho será substituído por esse valor e a alteração de roteamento será acionada de acordo com o caminho alvo. Se o valor da propriedade RedirectTO for uma função, o caminho será substituído pelo valor de retorno da função e a alteração de roteamento será acionada de acordo com esse caminho alvo.
Resultados de execução
Clique em Go Página 1
Clique em Go Página 2
O código de exemplo de rota de roteamento angular acima é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.