AngularJS ng-view com exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ 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.

  • 🪟 Espaço reservado único: Um elemento contendo ng-view marca o local onde cada modelo roteado é injetado, e apenas um elemento desse tipo é permitido por página.
  • 🔗 Emparelhamento de rotas: Cada rota nomeia um templateUrl e um controlador, vinculando a marcação e a lógica para essa visualização.
  • 📦 Dependência do módulo: As visualizações exigem o arquivo angular-route.js, além de uma dependência declarada do módulo ngRoute.
  • 🎯 Visualização padrão: A cláusula `otherwise` redireciona qualquer endereço não correspondente, que é o que renderiza uma visualização no primeiro carregamento.
  • 🌐 Servidor necessário: Os modelos são obtidos via HTTP, portanto a página precisa ser servida em vez de aberta a partir do sistema de arquivos.
  • ⚠️ Status do suporte: O AngularJS chegou ao fim de sua vida útil em 31 de dezembro de 2021 e não receberá mais atualizações de segurança.
Saiba Mais

Diretiva ng-view do AngularJS

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.

O que é uma visão

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/#show Exibe a visualização de pedidos sem sair da página. Apenas essa seção da página atual é atualizada.
  • Navegando para MyApp/#new Faz 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.

Diretiva ng-view em AngularJS

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.

Inclua o arquivo angular-route

Passo 2) Adicione as tags href e a tag div.

  1. Adicione tags href com links para “Adicionar novo evento” e “Exibir evento”.
  2. Adicione uma div contendo o ng-view Diretiva para marcar a região de visualização. A visualização correspondente é inserida ali sempre que um dos links é clicado.

Adicione tags href e tag div.

Passo 3) Na tag de script do AngularJS, adicione a configuração de roteamento.

  1. Quando o usuário clicar no NovoEvento link, AngularJS carrega add_event.html, injeta sua marcação na visualização e usa AddEventController para a lógica de negócios.
  2. Quando o usuário clicar no Evento de exibição link, ele carrega show_event.html e usa ShowDisplayController.
  3. O otherwise A cláusula define a visualização padrão exibida ao usuário, que neste caso é DisplayEvent.

Configuração de roteamento

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.

Adicionar controladores

<!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.

ARTIGOS RELACIONADOS

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

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

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:

saída ng-view

saída ng-view

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 ngRoute O módulo não foi listado como uma dependência, ou angular-route.js nã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 templateUrl O 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 otherwise A cláusula está configurada, portanto, um endereço vazio não corresponde a nenhuma rota.

Perguntas Frequentes

Não. O ngRoute suporta apenas uma região de visualização por página. Para várias regiões nomeadas simultaneamente, use a biblioteca ui-router, que fornece a interface ui-view e suporta visualizações aninhadas e irmãs.

Ative o modo HTML5 com $locationProvider.html5Mode(true) e adicione uma tag base. O servidor deve então reescrever os caminhos desconhecidos para index.html; caso contrário, uma atualização retornará um erro 404.

Em grande parte. AI As ferramentas convertem as tabelas de rotas em arrays de rotas do Angular e substituem o ng-view pelo router-outlet. Os controladores ainda precisam ser reescritos manualmente como componentes.

Os assistentes de IA verificam rapidamente os três suspeitos de sempre: uma dependência ngRoute ausente, um prefixo de hash que não corresponde à rota e um caminho de modelo que o navegador não consegue buscar.

Sim. Adicione um resolve O AngularJS bloqueia a rota. Ele espera que essas promessas sejam resolvidas antes de instanciar o controlador, o que evita que a visualização fique vazia enquanto os dados chegam.

Resuma esta postagem com: