Hoje em dia, todos já devem ter ouvido falar dos "Aplicativos de página única". Muitos dos sites conhecidos, como o Gmail, usam o conceito de aplicativos de página única (SPAs).
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 em vez disso 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 visualização?
- Diretiva ng-view em AngularJS
- Exemplo de ng-view
O que é uma visualização?
Uma visualização é o conteúdo mostrado ao usuário. Basicamente, o que o usuário deseja ver, portanto 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 Routing 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 pedido, no qual um cliente pode visualizar pedidos e fazer novos.
O diagrama abaixo e a explicação subsequente demonstram como fazer esse aplicativo como um aplicativo de página única.
Agora, em vez de ter duas páginas da web diferentes, uma para "Visualizar pedidos" e outra para "Novos pedidos", no AngularJS, você criaria duas visualizações diferentes chamadas "Visualizar pedidos" e "Novos pedidos" na mesma página.
Também teremos 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 dos Pedidos de Visualização, ao mesmo tempo em que não sairá da página. Apenas atualizará a seção da página existente com a informação de "Ver Pedidos". O mesmo se aplica à visualização "Novos pedidos".
Assim, dessa forma, fica mais simples separar o aplicativo em visualizações diferentes 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 visão incluída muda de acordo com a configuração do serviço $ route sem mudar a própria página.
Cobriremos as rotas em um capítulo posterior, por enquanto, nos concentraremos em adicionar várias visualizações ao nosso aplicativo.
Abaixo está o fluxograma completo de como todo o processo funciona. Examinaremos em detalhes cada processo em nosso exemplo mostrado abaixo.
Exemplo de ng-view
Vamos dar uma olhada em um exemplo de como podemos implementar visualizações.
Em nosso exemplo, vamos apresentar duas opções ao usuário,
- Um é exibir um "evento" e o outro é adicionar um "evento".
- Quando o usuário clica no link Adicionar um Evento, será mostrada a visualização para "Adicionar Evento" e o mesmo vale para "Exibir Evento".
Siga as etapas abaixo para implementar este exemplo.
Etapa 1) Incluir o arquivo de rota angular como uma referência de script.
Este arquivo de rotas é necessário para aproveitar as funcionalidades de ter múltiplas rotas e visualizações. Este arquivo pode ser baixado do site do angularJS.
Etapa 2) Nesta etapa,
- Adicione tags href que representarão links para "Adicionando um Novo Evento" e "Exibindo um Evento".
- Além disso, adicione uma tag div com a diretiva ng-view que representará a visão.
Isso permitirá que a visualização correspondente seja injetada sempre que o usuário clicar no link "Adicionar novo evento" ou "Exibir evento".
Etapa 3) Em 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 e 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 visã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 injetá-lo na visualização. Em segundo lugar, para processar a lógica de negócios 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
Etapa 4) Em seguida, é adicionar controladores para processar a lógica de negócios para a funcionalidade "DisplayEvent" e "Adicionar novo evento".
Estamos simplesmente adicionando uma variável de mensagem a cada objeto de escopo para cada controlador. Esta mensagem será exibida quando a visualização apropriada for mostrada ao usuário.
Event Registration Guru99 Global Event
Etapa 5) 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 "Show Event" e também uma expressão de mensagem para exibir a mensagem "This is to display an Event".
O valor da variável da mensagem será injetado com base no controlador que está anexado à visualização.
Para cada página, vamos adicionar a variável de mensagem, que será injetada de cada controlador respectivo.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Na saída, podemos notar 2 coisas
- A barra de endereço refletirá qual é a visualização atual sendo exibida. Portanto, como a visualização padrão é mostrar a tela Mostrar Evento, a barra de endereço mostra o endereço de "ExibirEvento".
- Esta seção é a Visualização, que é criada instantaneamente. Uma vez que a visualização padrão é Show Event, isso é o que é exibido para o usuário.
Agora clique no link Adicionar Novo Evento na página exibida. Agora você obterá a saída abaixo.
Resultado:
- 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 aplicativo.
- Esta seção é a Visualização e agora será alterada 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.