AngularJS ng-view com exemplo
James Hartmann
⚡ Resumo Inteligente
Em AngularJS, as views permitem que uma página troque seu conteúdo em vez de navegar para outra, o que proporciona a sensação de instantaneamente uma aplicação de página única. A diretiva `ng-view` marca a região que cada rota substitui por seu próprio template e controlador.
Locais conhecidos como Gmail Utilize o conceito de Single Page Applications (SPAs). Quando um usuário solicita uma página diferente, o aplicativo não navega para outra página; ele exibe a visualização da nova página dentro da página existente, dando a impressão de que o usuário nunca saiu. O mesmo é alcançado no AngularJS usando views em conjunto com rotas.
⚠️ Aviso de suporte: AngularJS alcançou fim da vida em 31 de dezembro de 2021 e não recebe mais patches ou correções de segurança. A diretiva abaixo permanece válida para a manutenção de aplicações AngularJS 1.x existentes; em versões modernas. Angular o equivalente é <router-outlet>.
O que é uma visão?
Uma visualização é o conteúdo mostrado ao usuário. Aquilo que o usuário deseja ver, a visualização correspondente do aplicativo é exibida.
A combinação de visualizações e rotas divide uma aplicação em visualizações lógicas e vincula cada uma a uma rota. controlador, o que torna a aplicação mais gerenciável.
Considere um aplicativo de pedidos no qual o cliente pode visualizar pedidos e fazer novos. O diagrama abaixo mostra como ele se torna um aplicativo de página única.
Em vez de duas páginas web separadas, uma para “Ver Pedidos” e outra para “Novos Pedidos”, AngularJS Utiliza duas visualizações na mesma página, acessíveis através de dois links de referência. #show e #new:
- Navegando para
MyApp/#showExibe a visualização de pedidos sem sair da página. Apenas essa seção da página atual é atualizada. - Navegando para
MyApp/#newFaz o mesmo para a visualização de Novos Pedidos.
Separar uma aplicação em visualizações dessa forma a torna gerenciável e fácil de modificar, e cada visualização tem um controlador correspondente que contém a lógica de negócios para essa função.
Diretiva ng-view em AngularJS
O ngView Directivas complementa o $route serviço, incluindo o modelo renderizado da rota atual no arquivo de layout principal, normalmente index.html.
Cada vez que a rota atual muda, a visualização incluída muda com ela, de acordo com o $route Configuração, sem que a própria página seja recarregada. rotas são abordados separadamente; aqui o foco é adicionar múltiplas visualizações.
O fluxograma abaixo mostra todo o processo, que o exemplo descreve passo a passo.
Como implementar o ng-view em AngularJS
Este exemplo apresenta duas opções ao usuário: exibir um evento e adicionar um evento. Clicando Adicionar um evento Exibe a visualização Adicionar Evento, e o mesmo se aplica à visualização Exibir Evento.
Passo 1) Inclua o arquivo angular-route como uma referência de script. Este arquivo é necessário para usar várias rotas e visualizações e está disponível no site do AngularJS.
Passo 2) Adicione as tags href e a tag div.
- Adicione tags href com links para “Adicionar novo evento” e “Exibir evento”.
- Adicione uma div contendo o
ng-viewDiretiva para marcar a região de visualização. A visualização correspondente é inserida ali sempre que um dos links é clicado.
Passo 3) Na tag de script do AngularJS, adicione a configuração de roteamento.
- Quando o usuário clicar no NovoEvento link, AngularJS carrega
add_event.html, injeta sua marcação na visualização e usaAddEventControllerpara a lógica de negócios. - Quando o usuário clicar no Evento de exibição link, ele carrega
show_event.htmle usaShowDisplayController. - O
otherwiseA cláusula define a visualização padrão exibida ao usuário, que neste caso é DisplayEvent.
Passo 4) Adicione controladores para processar a lógica de negócios de ambas as funções. Cada um simplesmente define uma mensagem em seu objeto de escopo, exibida quando a visualização correspondente for mostrada.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script> </head> <body ng-app="sampleApp"> <h1>Guru99 Global Event</h1> <div class="container"> <ul> <li><a href="#!/NewEvent">Add New Event</a></li> <li><a href="#!/DisplayEvent">Display Event</a></li> </ul> <div ng-view></div> </div> <script> var app = angular.module('sampleApp', ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/NewEvent", { templateUrl: "add_event.html", controller: "AddEventController" }) .when("/DisplayEvent", { templateUrl: "show_event.html", controller: "ShowDisplayController" }) .otherwise({ redirectTo: '/DisplayEvent' }); }); app.controller("AddEventController", function($scope) { $scope.message = "This is to Add a new Event"; }); app.controller("ShowDisplayController", function($scope) { $scope.message = "This is to display an Event"; }); </script> </body> </html>
⚠️ Três correções ao anúncio original. Primeiro, os links diziam #!NewEvent sem barra, enquanto as rotas são declaradas como /NewEvent, portanto, nada correspondeu. A partir do AngularJS 1.6, o prefixo de hash padrão é !, o que torna o endereço correto #!/NewEvent — uma barra após o ponto de exclamação. Segundo, ShowDisplayController Defina a mensagem como “Isto é exibir um evento”, faltando a palavra. para que o texto circundante cita. Terceiro, lib/bootstrap.js O arquivo foi carregado a partir de um caminho relativo que não resolve em lugar nenhum e nunca é usado, portanto foi removido.
Passo 5) Crie as páginas add_event.html e show_event.htmlCada um contém um cabeçalho e uma expressão que exibe a mensagem injetada pelo seu controlador.
- add_event.html
<h2>Add New Event</h2> {{message}}
- show_event.html
<h2>Show Event</h2> {{message}}
Se o código for executado com sucesso, a seguinte saída será exibida no navegador.
Saída:
Erros comuns do ng-view e como corrigi-los
Quase todas as falhas do ng-view decorrem da configuração do módulo, do formato do endereço ou da forma como a página está sendo servida, e não da própria diretiva.
- A área de visualização permanece vazia: da
ngRouteO módulo não foi listado como uma dependência, ouangular-route.jsnão foi carregado. Ambos são necessários, e o script deve vir depois.angular.min.js. - Os links alteram o endereço, mas nada é exibido: O href não corresponde à rota. A partir do AngularJS 1.6, o endereço precisa...
#!/Route; código antigo escrito para a versão 1.5 usado#/Route. - Os modelos não carregam devido a um erro de CORS: A página foi aberta diretamente do disco. Sirva-a via HTTP, porque
templateUrlO arquivo é obtido por meio de uma solicitação AJAX e o protocolo de arquivo é bloqueado. - Apenas a última imagem é exibida: Mais de um elemento carrega ng-view. O AngularJS respeita apenas uma região de visualização por página.
- Nada aparece no primeiro carregamento: não
otherwiseA cláusula está configurada, portanto, um endereço vazio não corresponde a nenhuma rota.
