Roteamento AngularJS com Parâmetros: Exemplo de Aplicação de Página Única

Antes de começarmos com o roteamento, vamos dar uma rápida visão geral dos aplicativos de página única.

O que são aplicativos de página única?

Aplicativos de página única ou (SPAs) são aplicativos da web que carregam uma única página HTML e atualizam dinamicamente a página com base na interação do usuário com o aplicativo da web.

O que é roteamento no AngularJS?

No AngularJS, o roteamento é o que permite criar aplicativos de página única.

• As rotas AngularJS permitem que você crie diferentes URLs para diferentes conteúdos em seu aplicativo.
• As rotas AngularJS permitem mostrar vários conteúdos, dependendo da rota escolhida.
• Uma rota é especificada no URL após o sinal #.

Vamos dar um exemplo de um site que é hospedado por meio do URL http://example.com/index.html .

Nesta página, você hospedaria a página principal de seu aplicativo. Suponha que se o aplicativo estivesse organizando um evento e alguém quisesse ver quais são os vários eventos em exibição, ou quisesse ver os detalhes de um determinado evento ou excluir um evento. Em um aplicativo de página única, quando o roteamento está habilitado, toda essa funcionalidade estaria disponível por meio dos links a seguir

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

O símbolo # seria usado junto com as diferentes rotas (ShowEvent, DisplayEvent e DeleteEvent).

• Portanto, se o usuário quisesse ver todos os eventos, ele seria direcionado para o link ( http://example.com/index.html#ShowEvent ), caso contrário
• Se eles quisessem apenas ver um determinado evento, seriam redirecionados para o link ( http://example.com/index.html#DisplayEvent ) ou
• Se quisessem excluir um evento, seriam direcionados para o link http://example.com/index.html#DeleteEvent .

Observe que o URL principal permanece o mesmo.

Neste tutorial, você aprenderá-

• Adicionando rota angular ($ routeProvider)
• Criação de uma rota padrão
• Acessando parâmetros da rota
• Usando o serviço Angular $ route
• Habilitando Roteamento HTML5

Adicionando rota angular ($ routeProvider)

Como discutimos anteriormente, as rotas em AngularJS são usadas para direcionar o usuário a uma visualização diferente de seu aplicativo. E esse roteamento é feito na mesma página HTML para que o usuário tenha a experiência de que não saiu da página.

Para implementar o roteamento, as etapas principais a seguir devem ser implementadas em seu aplicativo em qualquer ordem específica.

1. Referência a angular-route.js. Este é um arquivo JavaScript desenvolvido pelo Google que possui todas as funcionalidades de roteamento. Isso precisa ser colocado em seu aplicativo para que possa fazer referência a todos os módulos principais necessários para o roteamento.

2. A próxima etapa importante é adicionar uma dependência ao módulo ngRoute de dentro de seu aplicativo. Essa dependência é necessária para que a funcionalidade de roteamento possa ser usada no aplicativo. Se essa dependência não for adicionada, não será possível usar o roteamento no aplicativo angular.JS.

   Abaixo está a sintaxe geral desta declaração. Esta é apenas uma declaração normal de um módulo com a inclusão da palavra-chave ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. A próxima etapa seria configurar seu $ routeProvider. Isso é necessário para fornecer as várias rotas em seu aplicativo.

   Abaixo está a sintaxe geral desta declaração, que é bastante autoexplicativa. Ele apenas afirma que, quando o caminho relevante for escolhido, use a rota para exibir a visualização fornecida ao usuário.

when(path, route)

4. Links para sua rota de dentro de sua página HTML. Em sua página HTML, você adicionará links de referência para as várias rotas disponíveis em seu aplicativo.

 Rota 1 

5. Por fim, seria a inclusão da diretiva ng-view, que normalmente estaria em uma tag div. Isso seria usado para injetar o conteúdo da visualização quando a rota relevante for escolhida.

Agora, vamos ver um exemplo de roteamento usando as etapas mencionadas acima.

Em nosso exemplo,

Apresentaremos 2 links para o usuário,

• Um é exibir os tópicos para um curso Angular JS e o outro é para o curso Node.js.
• Quando o usuário clica em um dos links, os tópicos desse curso são exibidos.

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 angular.JS.

Etapa 2) Adicionar tags href que representarão links para "Angular JS Topics" e "Node JS Topics."

Passo 3) 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 em "Tópicos Angular JS" ou "Tópicos JS do Nó".

Etapa 4) Em sua tag de script para AngularJS, adicione o "módulo ngRoute" e o serviço "$ routeProvider".

Explicação do código:

1. A primeira etapa é garantir a inclusão do "módulo ngRoute". Com isso instalado, o Angular tratará automaticamente do roteamento em seu aplicativo. O módulo ngRoute, desenvolvido pelo Google, possui todas as funcionalidades que permitem o roteamento ser possível. Ao adicionar este módulo, o aplicativo compreenderá automaticamente todos os comandos de roteamento.
2. O $ routeprovider é um serviço que o angular usa para escutar em segundo plano as rotas que são chamadas. Portanto, quando o usuário clica em um link, o provedor de rotas detecta isso e decide qual rota seguir.
3. Crie uma rota para o link Angular - Este bloco significa que quando o link Angular for clicado, injete o arquivo Angular.html e também use o Controlador 'AngularController' para processar qualquer lógica de negócio.
4. Criar uma rota para o link Node - Este bloco significa que quando o link Node for clicado, injete o arquivo Node.html e também use o Controlador 'NodeController' para processar qualquer lógica de negócio.

Etapa 5) Em seguida, é adicionar controladores para processar a lógica de negócios para o AngularController e o NodeController.

Em cada controlador, estamos criando uma matriz de pares de valores-chave para armazenar os nomes e descrições dos tópicos para cada curso. A variável de array 'tutorial' é adicionada ao objeto de escopo para cada controlador.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Etapa 6) Crie páginas chamadas Angular.html e Node.html. Para cada página estamos realizando os passos abaixo.

Essas etapas garantirão que todos os pares de valores-chave da matriz sejam exibidos em cada página.

1. Usando a diretiva ng-repeat para percorrer cada par de valores-chave definido na variável do tutorial.
2. Exibindo o nome e a descrição de cada par de valores-chave.

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Se você clicar no link Tópicos do AngularJS, a saída abaixo será exibida.

A saída mostra claramente que,

• Quando o link "Angular JS Topics" é clicado, o routeProvider que declaramos em nosso código decide que o código Angular.html deve ser injetado.
• Este código será injetado na tag "div", que contém a diretiva ng-view. Além disso, o conteúdo da descrição do curso vem da "variável tutorial" que fazia parte do objeto de escopo definido no AngularController.
• Quando se clica nos Tópicos do Node.js., o mesmo resultado ocorrerá, e a visualização dos tópicos do Node.js.
• Além disso, observe que o URL da página permanece o mesmo, é apenas a rota após a tag # que muda. E este é o conceito de aplicativos de página única. A tag #hash no URL é um separador que separa a rota (que em nosso caso é 'Angular' como mostrado na imagem acima) e a página HTML principal (Sample.html)

Criação de uma rota padrão

O roteamento em AngularJS também fornece a facilidade de ter uma rota padrão. Esta é a rota escolhida se não houver correspondência com a rota existente.

A rota padrão é criada adicionando a seguinte condição ao definir o serviço $ routeProvider.

A sintaxe abaixo significa simplesmente redirecionar para uma página diferente se alguma das rotas existentes não corresponder.

otherwise ({redirectTo: 'page'});

Vamos usar o mesmo exemplo acima e adicionar uma rota padrão ao nosso serviço $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Explicação do código:

1. Aqui, estamos usando o mesmo código acima, com a única diferença é que estamos usando a instrução else e a opção "redirectTo" para especificar qual visualização deve ser carregada se nenhuma rota for especificada. No nosso caso, queremos que a visualização '/ Angular' seja mostrada.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

• Você pode ver claramente que a visualização padrão mostrada é a visualização JS angular.
• Isso ocorre porque quando a página é carregada, ela vai para a opção 'caso contrário' na função $ routeProvider e carrega a visualização '/ Angular'.

Acessando parâmetros da rota

O Angular também fornece a funcionalidade de fornecer parâmetros durante o roteamento. Os parâmetros são adicionados ao final da rota na URL, por exemplo, http: //guru99/index.html#/Angular/1 . Neste exemplo

1. , http: //guru99/index.html é o nosso principal URL de aplicativo
2. O símbolo # é o separador entre o URL do aplicativo principal e a rota.
3. Angular é a nossa rota
4. E finalmente '1' é o parâmetro que é adicionado à nossa rota

A sintaxe de como os parâmetros aparecem no URL é mostrada abaixo:

HTMLPage # / route / parameter

Aqui você notará que o parâmetro é passado após a rota na URL.

Então, em nosso exemplo, acima para os tópicos Angular JS, podemos passar um parâmetro como mostrado abaixo

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Aqui, os parâmetros de 1, 2 e 3 podem realmente representar o topicid.

Vejamos em detalhes como podemos implementar isso.

Etapa 1) Adicione o seguinte código à sua visualização

1. Adicione uma tabela para mostrar todos os tópicos do curso Angular JS para o usuário

2. Adicione uma linha de tabela para mostrar o tópico "Controladores". Para esta linha, altere a tag href para "Angular / 1", o que significa que quando o usuário clicar neste tópico, o parâmetro 1 será passado na URL junto com a rota.

3. Adicione uma linha de tabela para mostrar o tópico "Modelos". Para esta linha, altere a tag href para "Angular / 2", o que significa que quando o usuário clicar neste tópico, o parâmetro 2 será passado na URL junto com a rota.

4. Adicione uma linha de tabela para mostrar o tópico "Diretivas". Para esta linha, altere a tag href para "Angular / 3", o que significa que quando o usuário clicar neste tópico, o parâmetro 3 será passado na URL junto com a rota.

Etapa 2) Na função de serviço routeprovider, adicione: topicId para denotar que qualquer parâmetro passado na URL após a rota deve ser atribuído à variável topicId.

Etapa 3) Adicione o código necessário ao controlador

1. Certifique-se de primeiro adicionar "$ routeParams" como um parâmetro ao definir a função do controlador. Este parâmetro terá acesso a todos os parâmetros de rota passados ​​na URL.
2. O parâmetro "routeParams" tem uma referência ao objeto topicId, que é passado como um parâmetro de rota. Aqui estamos anexando a variável '$ routeParams.topicId' ao nosso objeto de escopo como a variável '$ scope.tutotialid'. Isso está sendo feito para que possa ser referenciado em nossa visão por meio da variável tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Etapa 4) Adicione a expressão para exibir a variável tutorialid na página Angular.html.

Anguler


{{tutorialid}}

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Na tela de saída,

• Se você clicar no link Detalhes do tópico do primeiro tópico, o número 1 será anexado ao URL.
• Este número será então considerado como um argumento "routeparam" pelo serviço routeprovider Angular.JS e pode então ser acessado por nosso controlador.

Usando o serviço Angular $ route

O serviço $ route permite que você acesse as propriedades da rota. O serviço $ route está disponível como parâmetro quando a função é definida no controlador. A sintaxe geral de como o parâmetro $ route está disponível no controlador é mostrada abaixo;

myApp.controller('MyController',function($scope,$route)

1. myApp é o módulo angular.JS definido para seus aplicativos
2. MyController é o nome do controlador definido para a sua aplicação
3. Assim como a variável $ scope é disponibilizada para seu aplicativo, que é usada para passar informações do controlador para a visualização. O parâmetro $ route é usado para acessar as propriedades da rota.

Vamos dar uma olhada em como podemos usar o serviço $ route.

Neste exemplo,

• Vamos criar uma variável personalizada simples chamada "mytext", que conterá a string "This is angular."
• Vamos anexar essa variável à nossa rota. E mais tarde vamos acessar essa string de nosso controlador usando o serviço $ route e, em seguida, usar o objeto de escopo para exibi-lo em nossa visão.

Então, vamos ver os passos que precisamos realizar para conseguir isso.

Etapa 1) Adicionar um par de valores-chave personalizado à rota. Aqui, estamos adicionando uma chave chamada 'meuTexto' e atribuindo a ela o valor "Isto é angular".

Etapa 2) Adicione o código relevante ao controlador

1. Adicione o parâmetro $ route à função do controlador. O parâmetro $ route é um parâmetro chave definido no angular, que permite acessar as propriedades da rota.
2. A variável "mytext" que foi definida na rota pode ser acessada através da referência $ route.current. Isso é então atribuído à variável 'text' do objeto de escopo. A variável de texto pode então ser acessada a partir da visualização de acordo.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Etapa 3) Adicionar uma referência à variável de texto do objeto de escopo como uma expressão. Isso será adicionado à nossa página Angular.html conforme mostrado abaixo.

Isso fará com que o texto "Isto é angular" seja injetado na visualização. A expressão {{tutorialid}} é a mesma que a vista no tópico anterior e exibirá o número '1'.

Anguler


{{text}}

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

• Podemos ver que o texto "Isto é angular" também é exibido quando clicamos em qualquer um dos links da tabela. O id do tópico também é exibido ao mesmo tempo que o texto.

Habilitando Roteamento HTML5

O roteamento HTML5 é usado basicamente para criar URLs limpos. Significa a remoção da hashtag do URL. Portanto, os URLs de roteamento, quando o roteamento HTML5 é usado, apareceriam conforme mostrado abaixo

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Este conceito é normalmente conhecido como apresentação de URLs bonitos para o usuário.

Existem 2 etapas principais que precisam ser realizadas para o roteamento de HTML5.

1. Configurando $ locationProvider
2. Definindo nossa base para links relativos

Vejamos os detalhes de como realizar as etapas mencionadas acima em nosso exemplo acima

Etapa 1) Adicione o código relevante ao módulo angular

1. Adicionar uma constante baseURL ao aplicativo - Isso é necessário para o roteamento HTML5 para que o aplicativo saiba qual é a localização base do aplicativo.
2. Adicione os serviços $ locationProvider. Este serviço permite definir o html5Mode.
3. Defina o html5Mode do serviço $ locationProvider como verdadeiro.

Etapa 2) Remova todas as #tags dos links ('Angular / 1', 'Angular / 2', 'Angular / 3') para criar um URL fácil de ler.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

• Você pode ver que a tag # não está lá ao acessar o aplicativo.

Resumo

• O roteamento é usado para apresentar diferentes visualizações ao usuário na mesma página da web. Este é basicamente o conceito usado em aplicativos de página única que são implementados para quase todos os aplicativos da web modernos
• Uma rota padrão pode ser configurada para roteamento angular.JS. É usado para determinar qual será a visualização padrão a ser mostrada ao usuário
• Os parâmetros podem ser passados ​​para a rota por meio do URL como parâmetros de rota. Esses parâmetros são acessados ​​posteriormente usando o parâmetro $ routeParams no controlador
• O serviço $ route pode ser usado para definir pares de valores-chave personalizados na rota que podem ser posteriormente acessados ​​de dentro da visão
• O roteamento HTML5 é usado para remover a #tag do URL de roteamento em angular para formar um URL bonito