Roteamento angularJS
Neste capítulo, apresentaremos o roteamento do AngularJS para você.
O roteamento do AngularJS nos permite acessar conteúdo diferente através de diferentes URLs.
O AngularJS pode realizar o aplicativo da Web de página única (SPA) para várias visualizações.
Normalmente, nosso URL é http://runoob.com/first/page, mas em um aplicativo da Web de uma única página, o AngularJS é implementado por meio de tags #+, por exemplo:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Quando clicamos em qualquer um dos links acima, o endereço solicitado ao servidor é o mesmo (http://runoob.com/). Porque o conteúdo após o número # será ignorado pelo navegador ao solicitá -lo ao servidor. Portanto, precisamos implementar a função do conteúdo após o número # no cliente. O roteamento do AngularJS nos ajuda a distinguir diferentes páginas lógicas e ligar páginas diferentes ao controlador correspondente através da tag #+.
Na figura acima, podemos ver que dois URLs são criados: /Showorders e /AddNeworder. Cada URL possui uma visão e controlador correspondentes.
Em seguida, vamos dar uma olhada em um exemplo simples:
<html> <head> <meta charset = "utf-8"> <title> AngularJS Exemplo de roteamento-tutorial de novidades </ititle> </ad Head> <corpo ng-app = 'RoutingDemoapp'>> <h2> Aplicação de roteamento de angularjs </h2> <ul> <li> <a a href = "/////////href <h2> angularjs de roteamento </h2> <ul> <li> <a a href ="///////////"/187> href = "#/computadores"> computadores </a> </li> <li> <a href = "#/impressoras"> print </a> </li> <li> <a href = "#/blabla"> outros </a> src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> Angular.Module ('RoutingDemoApp', ['NGROUTE']) .CONFIG (['$ RouteProvider', função ($ RouteProvider) {$ RouteProvider .When ('/', {Model: 'esta é a página inicial'}). .When ('/Printers', {modelo: 'Esta é a página da impressora'}) .otherwise ({redirectTo: '/'}); </script> </body> </html>Resultados em execução:
Aplicação de roteamento do AngularJS
Exemplo de análise:
1. Carregue o arquivo JS que implementa o roteamento: angular rote.js.
2. Ele contém o módulo NGROUTE como o módulo de dependência do módulo de aplicação principal.
Angular.Module ('RoutingDemoApp', ['NGROUTE'])
3. Use a diretiva NGVIEW.
<div ng-view> </div>
O conteúdo HTML nessa div mudará de acordo com as mudanças de rota.
Configurar $ RouteProvider, o RouteProvider AngularJS $ é usado para definir regras de roteamento.
Module.config (['$ routeProvider', function ($ routeProvider) {$ routeProvider .when ('/', {modelo: 'Esta é a página inicial'}) .when ('/computers', {modelo: 'Esta é a página de classificação do computador'). .oTerwise ({redirectTo: '/'});}]);A função de configuração do módulo AngularJS é usada para configurar regras de roteamento. Ao usar o ConfigaPI, solicitamos que o $ RouteProvider seja injetado em nossa função de configuração e definir nossas regras de roteamento usando $ RouteProvider.WhenApi.
$ RouteProvider nos fornece a função When (Path, Object) e de outra forma (objeto) define todas as rotas em ordem, e a função contém dois parâmetros:
O primeiro parâmetro é uma regra regular de URL ou URL.
O segundo parâmetro é o objeto de configuração de roteamento.
Objeto de configurações de roteamento
O roteamento do AngularJS também pode ser implementado através de diferentes modelos.
O primeiro parâmetro do $ RouteProvider.
As regras de sintaxe para roteamento de objetos de configuração são as seguintes:
$ routeProvider.When (url, {modelo: string, templateurl: string, controlador: string, função ou matriz, controladores: string, redirectTo: string, function, resolver: objeto <key, function>});Descrição do parâmetro:
modelo:
Se precisarmos apenas inserir o conteúdo HTML simples em NG-View, use este parâmetro:
.When ('/computadores', {modelo: 'Esta é a página de classificação do computador'})
templateurl:
Se precisarmos apenas inserir o arquivo de modelo HTML em NG-View, use este parâmetro:
$ routeProvider.when ('/computers', {templateurl: 'Views/computers.html',});O código acima obterá o conteúdo do arquivo Views/Computers.html do servidor e o insira no NG-View.
controlador:
Função, string ou tipo de matriz, a função do controlador executada no modelo atual gera um novo escopo.
Controlleras:
Tipo de string, especifique um alias para o controlador.
RedirectTo:
O endereço do redirecionamento.
resolver:
Especifica outros módulos dos quais o controlador atual depende.
Exemplo
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.mins"> </slitt/angular.js/1.4.6/angular.mins "> </libs/angular.js/1.4.4 src = "http://apps.bdimg.com/libs/angular-rute/1.3.13/angular--rute.js"> </script> <script type = "text/javascript"> angular.module ('ngroteexample', ['ngrontere'). $ rota;}). 'incorporado.html', controlador: 'Aboutcontroller'}). <script type = "text/ng-template" id = "incorporado.about.html"> <h1> sobre </h1> </script> <div> <div id = "navegação"> <a href = "#//home"> home </a> <a href = "#/"> sobre </a> </a " </div> </body> </html>Resultados em execução:
Homeabout
Lar
O exposto acima é uma coleção de informações sobre o roteamento do AngularJS. Espero que os alunos que possam ajudar a programação do AngularJS.