Recentemente, um colega encontrou alguns problemas no processo de aprendizagem e modelos. Hoje, escrevi um exemplo para ela e o compartilhei com aqueles que estão aprendendo AngularJs.
Falando nisso, o Projeto de Desenvolvimento do AngularJS é muito emocionante, e a diversão é o seu modelo de desenvolvimento, tornando o código mais claro, mais legível, mais conciso e mais sustentável. No entanto, também há coisas que me dão dor de cabeça ao desenvolver usando o AngularJS, ou seja, a estrutura atual do front-end é mais focada no jQuery, e muitos plug-ins dependem do jQuery, e há muito poucos plug-ins para ângus (eu não conheço outros plug-ins angulares, exceto angularui. Para garantir que o código no controlador seja claro e não confuso, estipulamos que o DOM não pode ser operado no controlador; portanto, toda vez que precisamos operar o elemento DOM, somos instruções para concluí -lo, para que exista. Muitos plug-ins jQuery precisam ser convertidos em instruções para operar, o que é uma coisa muito nojenta. Parece estar muito longe, ok ~~
Índice:
1. Introdução de roteamento angularJS
2. Instância de roteamento angularJS
3. AngularJS usa o roteamento do modo HTML5 combinado com o redirecionamento do servidor da web para simplificar os endereços de roteamento
1. Introdução de roteamento angularJS
O roteamento do AngularJS é diferente do roteamento de back -end MVC. O roteamento do front-end do AngularJS requer a definição de regras de roteamento (RouteProvider) para o especificado (NG-APP) com antecedência na página do modelo e depois dizendo (ng-app) qual página (html) carrega através de diferentes URLs e, em seguida, renderizá-los na visualização (ng-app) (NG-View). O roteamento do MVC é solicitar a ação do controlador por meio de diferentes solicitações de URL e, em seguida, retornar a visualização de acordo com as regras de roteamento. AngularJS é uma rota de front-end pura. Mais tarde, combinaremos arquivos de configuração para simplificar os endereços de roteamento.
2. Instância de roteamento angularJS
Criamos um novo arquivo JS, aqui eu o nomei App.js, e escrevemos o seguinte código no arquivo:
1 angular.Module ("App", [2 'ngrote' 3]) 4 .config (['$ roteiro', function ($ routeProvider) {5 $ routeProvider.when ("/list", {6 modelo: "esta é a página" 7}). "/list" 12}) 13}])
Criamos um novo arquivo html e nomei o Index.html. O código e a descrição são os seguintes:
1 <! Doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-app = "App"> 3 <Head> 4 <Title> </title> 5 </6 <body> 7 <Cheft> <H2> isto é ng-view> </div> 12 </content> 13 <Oder> 14 <H3> Este é o fundo </h3> 15 </do Footer> 16 </body> 17 </html> 18 <script src = "/scripts/angular/angular.min.js"> </script> 19 src = "/scripts/angular-route/angular- rotate.min.js"> </script> 20 <script src = "/scripts/app.js"> </script>
Execute o exemplo, o efeito é o seguinte.
Abra o endereço de entrada do navegador: http: // localhost: 2987/index.html#/detalhe e http: // localhost: 2987/index.html#/list, respectivamente, você pode ver as páginas mostradas na figura a seguir:
3. AngularJS usa o roteamento do modo HTML5 combinado com o servidor da web para simplificar os endereços de roteamento
Na foto acima, podemos ver que o endereço de solicitação é muito longo. É difícil para mim que tenha um distúrbio obsessivo-compulsivo aceitar esse tipo de endereço, então decidi fazer essa mudança:
1) AngusJs permite o roteamento do modo HTML5 e remove o número #:
Para as ânguas, o padrão é que o modo de roteamento HTML5 não está ativado. Ativamos o modo de roteamento HTML5 seguindo os seguintes métodos:
1 angular.module ("App", [2 'ngrote' 3]) 4 .config (['$ roteiro', '$ LocationProvider', função ($ routeProvider, $ locationProvider) {5 // Abra o Modo de roteamento HTML5 6 $ LocationProvider.htmod (TruePr) 7) 7 $ Routeprov. página "9}). Quando ("/detalhe ", {10 modelo:" Esta é a página de detalhes "11}) 12.Otherwise ({13 redirectTo:" /404.html"14}) 15}]))
Dessa forma, depois de remover o número # de acordo com o endereço de solicitação acima, a página foi atualizada. O prompt 404 não conseguiu encontrar a página. O motivo é que, se esse endereço for solicitado ao IIS em segundo plano, o arquivo correspondente não será encontrado, portanto a página de erro 404 será retornada diretamente. Portanto, precisamos adicionar a configuração do servidor da web ao arquivo de configuração e redirecionar o arquivo da seguinte forma:
1 <System.WebServer> 2 <Rewrite> 3 <Rules> 4 <Nome da regra = "Nome"> 5 <MAKE URL = "^LIST | Detalhe*" Ignorecase = "True"/> 6 <Condições LogicalGrouping = "MatchAll"> 7 <add input = "{request_filename}" MatchType = "isfile" input = "{request_filename}" matchType = "isDirectory" negate = "true"/> 9 </condições> 10 <ação type = "rewrite" url = "/index.html"/> 11 </regra> 12 </regras> 13 </rewrite> 14 </System.webeserver>
Conforme mostrado no código acima, o <MAKE URL = "^LIST | Detalhe*" ignorecase = "true"/> significa que, se o endereço de solicitação contiver lista ou detalhes (escreva a própria expressão regular de acordo com os requisitos), ele será redirecionado para a página Index.html. Ao inserir http: // localhost: 2987/detalhe na página, o IIS retornará primeiro à página do modelo (index.html) e, em seguida, a rota de AngulAjs começará a ser executada.
Digite http: // localhost: 2987/detalhe no navegador e descobriu que não obtivemos o resultado que queríamos, ou seja, a rota não corresponde.
Depois de pesquisar on -line por um longo tempo, finalmente encontrei a solução, que é adicionar a tag <ase> à página HTML da seguinte forma:
1 <! Doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-app = "App"> 3 </head> 4 <body> 8 </title> 5 <base href = "/"/> 6 </cheft> 7 <body> 8 </title> </title> <base href = "/"> 6 </> <body> </header> 11 <Content> 12 <Dr Ng-View> </div> 13 </acester> 14 <Oder> 15 <H3> Este é o fundo </h3> 16 </SOODER> 17 </mody> 18 </html> 19 <script src = "/scripts/angular/angular.min.js"> </script 20 src = "/scripts/angular-route/angular- rotate.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
Dessa forma, digite: http: // localhost: 2987/detalhe no navegador e você verá o resultado que queremos. A captura de tela é a seguinte:
Pergunta legado: por que você pode ter sucesso adicionando a tag <base href = " /" />? Eu gostaria de perguntar a todos os blogueiros sobre essa pergunta.
Se houver algo errado com o conteúdo acima, reclame sobre isso! ! !
O exposto acima está o conteúdo completo dos exemplos de roteamento e modelo do AngularJS e métodos de simplificação de endereço de roteamento (leitura obrigatória) trazidos a você pelo editor. Espero que todos apoiem mais wulin.com ~