Exemplo de roteamento AngularJS com parâmetros

Antes de aprendermos como funciona o roteamento em Angular, vamos apenas dar uma rápida visão geral sobre 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 em AngularJS?

Roteamento em AngularJS é um método que permite criar aplicativos de página única. Ele permite que você crie URLs diferentes para conteúdos diferentes em seus aplicativos da web. O roteamento AngularJS também ajuda a mostrar vários conteúdos dependendo da rota escolhida. É especificado no URL após o sinal #.

Vejamos um exemplo de site hospedado por meio do URL http://example.com/index.html.

Nesta página, você hospedaria a página principal do seu aplicativo. Suponha que a aplicação 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 uma aplicação de página única, quando o roteamento está habilitado, todas essas funcionalidades estarão disponíveis através 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).

Então se o usuário quisesse ver todos os Eventos, ele seria direcionado para o link (http://example.com/index.html#ShowEvent), outro
Se quisessem apenas ver um evento específico, 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.

Adicionando rota AngularJS usando $routeProvider

Então, como discutimos anteriormente, as rotas em AngularJS são usados para rotear o usuário para uma visão diferente do 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.

Referência a angular-route.js. Isto é um JavaScript arquivo 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.
A próxima etapa importante é adicionar uma dependência ao módulo ngRoute de dentro do 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 instruçã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']);

O próximo passo 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)

Links para sua rota na sua página HTML. Na sua página HTML, você adicionará links de referência para as diversas rotas disponíveis na sua aplicação.

<a href="#/route1">Route 1</a><br/>

Por fim, seria a inclusão do 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 fosse escolhida.

Exemplo de roteamento AngularJS

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

Em nosso exemplo de roteamento AngularJS com parâmetros,

Apresentaremos 2 links para o usuário,

Uma delas é exibir os tópicos para um JS angular claro, e o outro é para o Node.js curso.
Quando o usuário clica em qualquer link, os tópicos desse curso serão exibidos.

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

Passo 2) Adicione 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 visualização.

Isso permitirá que a visualização correspondente seja injetada sempre que o usuário clicar em “Angular JS Topics” ou “Node JS Topics”.

Passo 4) Na sua tag de script para AngularJS, adicione o “módulo ngRoute” e o serviço “$routeProvider”.

Explicação do código:

O primeiro passo é garantir a inclusão do “módulo ngRoute”. Com isso implementado, o Angular tratará automaticamente o roteamento em seu aplicativo. O módulo ngRoute desenvolvido pelo Google possui todas as funcionalidades que permitem o roteamento. Ao adicionar este módulo, a aplicação compreenderá automaticamente todos os comandos de roteamento.
O $routeprovider é um serviço que o angular usa para ouvir em segundo plano as rotas que são chamadas. Assim, quando o usuário clicar em um link, o provedor de rotas no AngularJS detectará isso e decidirá qual rota seguir.
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.
Crie uma rota para o link do Node – Este bloco significa que quando o link do Node for clicado, injete o arquivo Node.html e também use o Controller 'NodeController' para processar qualquer lógica de negócio.

Passo 5) O próximo passo é adicionar controladores para processar a lógica de negócios do AngularController e do NodeController.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

Passo 6) Crie páginas chamadas Angular.html e Node.html. Para cada página estamos executando as etapas abaixo.

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

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

Angular.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Nó.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

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

Saída:

Se você clicar no link AngularJS Topics, 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 do tutorial” que fazia parte do objeto de escopo definido no AngularController.
Quando alguém clica no Node.js Tópicos, o mesmo resultado ocorrerá e a visualização dos tópicos do Node.js será manifestada.
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 na URL é um separador que separa a rota (que no nosso caso é 'Angular' como mostrado na imagem acima) e a página HTML principal (Sample.html)

Criando uma rota padrão em AngularJS

O roteamento no AngularJS também oferece a possibilidade 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:

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 sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

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 carrega ela vai para a opção 'caso contrário' na função $routeProvider e carrega a visualização '/Angular'.

Como acessar parâmetros da rota AngularJS

Angular também fornece a funcionalidade para 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 de roteamento Angular,

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

A sintaxe da aparência dos parâmetros no URL é mostrada abaixo:

Página HTML#/rota/parâmetro

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

Portanto, em nosso exemplo de rotas AngularJS, acima para os tópicos Angular JS, podemos passar parâmetros conforme mostrado abaixo

Exemplo.html#/Angular/1

Exemplo.html#/Angular/2

Exemplo.html#/Angular/3

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

Vejamos detalhadamente como podemos implementar a rota Angular com parâmetro:

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

Adicione uma tabela para mostrar todos os tópicos do curso Angular JS ao usuário
Adicione uma linha da 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.
Adicione uma linha da 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.
Adicione uma linha da tabela para mostrar o tópico “Diretrizes”. 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) Adicionar o ID do tópico na função de serviço Routeprovider
Na função de serviço routeprovider, adicione:topicId para indicar 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

Certifique-se de primeiro adicionar “$routeParams” como parâmetro ao definir a função do controlador. Este parâmetro terá acesso a todos os parâmetros de rota passados na URL.
O parâmetro “routeParams” possui uma referência ao objeto topicId, que é passado como 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 view através da variável tutorialid.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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 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 um argumento “routeparam” pelo serviço Angular.JS routeprovider e poderá então ser acessado pelo nosso controlador.

Como usar o serviço Angular $ Route

O serviço $route permite acessar 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)

myApp é o módulo angular.JS definido para seus aplicativos
MyController é o nome do controlador definido para sua aplicação
Assim como a variável $scope é disponibilizada para sua aplicação, que é utilizada para passar informações do controlador para a view. 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 esta variável à nossa rota. E mais tarde acessaremos essa string de nosso controlador usando o serviço $route e, posteriormente, usaremos o objeto de escopo para exibi-la em nossa visualização.

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

Passo 1) Adicione um par de valores-chave personalizado à rota. Aqui, estamos adicionando uma chave chamada 'mytext' e atribuindo a ela o valor “Isso é angular”.

Passo 2) Adicione o código relevante ao controlador

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

Passo 3) Adicione 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 “This is angular” seja injetado na visualização. A expressão {{tutorialid}} é a mesma vista no tópico anterior e exibirá o número '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

Saída:

Da saída,

Podemos ver que o texto “This is 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 URL limpo. Significa a remoção da hashtag da URL. Portanto, os URLs de roteamento, quando o roteamento HTML5 for usado, apareceriam conforme mostrado abaixo

Exemplo.html/Angular/1

Exemplo.html/Angular/2

Exemplo.html/Angular/3

Este conceito é normalmente conhecido como apresentar uma URL bonita ao usuário.

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

Configurando $locationProvider
Definindo nossa base para links relativos

Vejamos detalhadamente como realizar as etapas mencionadas acima em nosso exemplo acima

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

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

Saída:

Da saída,

Você pode ver que a tag # não está presente 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 através 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 acessados posteriormente de dentro da visualização
O roteamento HTML5 é usado para remover a #tag do URL de roteamento em angular para formar um URL bonito

Você pode gostar:

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

O que é roteamento em AngularJS?

Adicionando rota AngularJS usando $routeProvider

ARTIGOS RELACIONADOS

Exemplo de roteamento AngularJS

Criando uma rota padrão em AngularJS

Como acessar parâmetros da rota AngularJS

Como usar o serviço Angular $ Route

Habilitando roteamento HTML5

Resumo