AngularJS ng-view com exemplo: como implementar a visualização
James Hartmann
Hoje em dia, todos já devem ter ouvido falar de "Aplicações de Página Única". Muitos sites conhecidos, como... Gmail Utilizar o conceito de Aplicativos de Página Única (SPA, na sigla em inglês).
SPA's é o conceito em que quando um usuário solicita uma página diferente, o aplicativo não navegará para essa página, mas exibirá a visualização da nova página dentro da própria página existente.
Dá ao usuário a sensação de que ele nunca saiu da página. O mesmo pode ser conseguido no Angular com a ajuda de Views em conjunto com Routes.
Neste tutorial, você aprenderá
O que é uma visão?
Uma visualização é o conteúdo mostrado ao usuário. Basicamente o que o usuário deseja ver, dessa forma essa visualização do aplicativo será mostrada ao usuário.
A combinação de visualizações e rotas ajuda a dividir um aplicativo em visualizações lógicas e vincular diferentes visualizações aos controladores.
Dividir o aplicativo em diferentes visualizações e usar o roteamento para carregar diferentes partes do aplicativo ajuda a dividir logicamente o aplicativo e torná-lo mais gerenciável.
Vamos supor que temos um aplicativo de pedidos, onde um cliente pode visualizar pedidos e fazer novos.
O diagrama abaixo e a explicação subsequente demonstram como tornar este aplicativo um aplicativo de página única.
Agora, em vez de ter duas páginas web diferentes, uma para “Ver pedidos” e outra para “Novos pedidos”, em AngularJS, você criaria duas visualizações diferentes chamadas “Ver pedidos” e “Novos pedidos” na mesma página.
Teremos também 2 links de referência em nosso aplicativo chamados #show e #new.
- Assim quando o aplicativo for para MyApp/#show, ele mostrará a visualização de Ver Pedidos, ao mesmo tempo que não sairá da página. Irá apenas atualizar a seção da página existente com as informações de “Ver Pedidos”. O mesmo vale para a visualização “Novos pedidos”.
Dessa forma, fica mais simples separar o aplicativo em diferentes visualizações para torná-lo mais gerenciável e fácil de fazer alterações sempre que necessário.
E cada visualização terá um controlador correspondente para controlar a lógica de negócios dessa funcionalidade.
Diretiva ng-view em AngularJS
O “ngView” é uma diretiva que complementa o serviço $route incluindo o modelo renderizado da rota atual no arquivo de layout principal (index.html).
Cada vez que a rota atual muda, a visualização inclui alterações nela de acordo com a configuração do serviço $route sem alterar a própria página.
Estaremos cobrindo rotas em um capítulo posterior, por enquanto, nos concentraremos em adicionar múltiplas visualizações ao nosso aplicativo.
Abaixo está todo o fluxograma de como funciona todo o processo. Examinaremos detalhadamente cada processo em nosso exemplo mostrado abaixo.
Como implementar o ng-view em AngularJS
Vamos dar uma olhada em um exemplo de como podemos implementar o ng-view no AngularJS. Em nosso exemplo, apresentaremos duas opções ao usuário,
- Uma é exibir um “Evento” e a outra é adicionar um “Evento”.
- Quando o usuário clica no link Adicionar um Evento, será mostrada a visualização de “Adicionar Evento” e o mesmo vale para “Exibir Evento”.
Siga as etapas abaixo para implementar este exemplo.
Passo 1) Inclua o arquivo angular-route como referência de script.
Este arquivo de rota é necessário para aproveitar as funcionalidades de múltiplas rotas e visualizações. Este arquivo pode ser baixado do site angularJS.
Passo 2) Adicione tags href e tags div.
Nesta etapa,
- Adicione tags href que representarão links para “Adicionar um novo evento” e “Exibir um evento”.
- Além disso, adicione uma tag div com a diretiva ng-view que representará a visualização. Isso permitirá que a visualização correspondente seja injetada sempre que o usuário clicar no link “Adicionar novo evento” ou no “link Exibir evento”.
Passo 3) Na sua tag de script para Angular JS, adicione o código a seguir.
Não vamos nos preocupar com o roteamento, por enquanto veremos isso em um capítulo posterior. Vamos apenas ver o código das visualizações por enquanto.
- Esta seção de código significa que quando o usuário clica na tag href “NewEvent” que foi definida na tag div anteriormente. Ele irá para a página da web add_event.html, pegará o código de lá e o injetará na visualização. Em segundo lugar, para processar a lógica de negócios para esta visualização, vá para “AddEventController”.
- Esta seção de código significa que quando o usuário clica na tag href “DisplayEvent” que foi definida na tag div anteriormente. Ele irá para a página show_event.html, pegará o código de lá e injetará na visualização. Em segundo lugar, para processar a lógica de negócio para esta visualização, vá para “ShowDisplayController”.
- Esta seção de código significa que a visualização padrão mostrada ao usuário é a visualização DisplayEvent
Passo 4) Adicione controladores para processar a lógica de negócios.
O próximo passo é adicionar controladores para processar a lógica de negócios para as funcionalidades “DisplayEvent” e “Add New Event”.
Estamos simplesmente adicionando uma variável de mensagem a cada objeto de escopo de cada controlador. Esta mensagem será exibida quando a visualização apropriada for mostrada ao usuário.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.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 display an Event";
});
</script>
</body>
</html>
Passo 5) Crie páginas chamadas add_event.html e show_event.html
A seguir, crie páginas chamadas add_event.html e show_event.html. Mantenha as páginas simples, conforme mostrado abaixo.
No nosso caso, a página add_event.html terá uma tag de cabeçalho junto com o texto “Adicionar Novo Evento” e terá uma expressão para exibir a mensagem “Isto é para Adicionar um Novo Evento”.
Da mesma forma, a página show_event.html também terá uma tag de cabeçalho para conter o texto “Mostrar evento” e também uma expressão de mensagem para exibir a mensagem “Isto é para exibir um evento”.
O valor da variável mensagem será injetado com base no controlador que está anexado à visualização.
Para cada página adicionaremos a variável mensagem, que será injetada de cada respectivo 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á mostrada quando você executar o código no navegador.
Saída:
Na saída, podemos notar 2 coisas
- A barra de endereço refletirá qual é a visualização atual que está sendo exibida. Portanto, como a visualização padrão é mostrar a tela Mostrar Evento, a barra de endereço mostra o endereço de “DisplayEvent”.
- Esta seção é a Visualização, que é criada dinamicamente. Como a visualização padrão é Show Event, é isso que é exibido ao usuário.
Agora clique no link Adicionar novo evento na página exibida. Agora você obterá a saída abaixo.
Saída:
- A barra de endereço agora refletirá que a visualização atual é agora a visualização “Adicionar novo evento”. Observe que você ainda estará na mesma página do aplicativo. Você não será direcionado para uma nova página de inscrição.
- Esta seção é a Visualização e agora mudará para mostrar o HTML para a funcionalidade “Adicionar novo evento”. Portanto, agora nesta seção a tag de cabeçalho “Adicionar Novo Evento” e o texto “Isto é para Adicionar um Novo Evento” são exibidos para o usuário.
