AngularJS ng-view com exemplo: como implementar a visualização

Hoje em dia, todo mundo já deve ter ouvido falar dos “Aplicativos de página única”. Muitos dos sites conhecidos, como Gmail use o conceito de aplicativos de página única (SPA'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.

O que é uma visão

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.

Diretiva ng-view em AngularJS

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.

Implementar ng-view em AngularJS

Passo 2) Adicione tags href e tags div.

Nesta etapa,

  1. Adicione tags href que representarão links para “Adicionar um novo evento” e “Exibir um evento”.
  2. 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”.

Implementar ng-view em AngularJS

Passo 3) Na sua tag de script para Angular JS, adicione o seguintewing código.

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.

  1. 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”.
  2. 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”.
  3. Esta seção de código significa que a visualização padrão mostrada ao usuário é a visualização DisplayEvent

    Implementar ng-view em AngularJS

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.

Implementar ng-view em AngularJS

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

Implementar ng-view em AngularJS

<h2>Add New Event</h2>

{{message}}
  • show_event.html

Implementar ng-view em AngularJS

<h2>Show Event</h2>
	
{{message}}

Se o código for executado com sucesso, o seguintewing A saída será mostrada quando você executar seu código no navegador.

Saída:

Implementar ng-view em AngularJS

Na saída, podemos notar 2 coisas

  1. 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”.
  2. 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.

Implementar ng-view em AngularJS

Saída:

  1. 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.
  2. 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.