Roteamento com parâmetros no AngularJS

Antes de analisarmos como o roteamento funciona no AngularJS, é útil entender para que tipo de aplicação o roteamento foi desenvolvido. A seção abaixo estabelece esse contexto, e todas as técnicas que se seguem se baseiam nele.

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

Aplicações de página única, ou SPAs, são aplicações web que carregam uma única página HTML e a atualizam dinamicamente conforme o usuário interage com ela. Em vez de solicitar um novo documento do servidor a cada clique, uma SPA troca apenas a parte da página que foi alterada.

Esse design cria um problema. Se o navegador nunca navegar para um novo documento, a barra de endereços nunca mudará, então o usuário não poderá adicionar uma página aos favoritos, compartilhá-la ou usar o botão Voltar. O roteamento resolve exatamente esse problema.

O que é roteamento em AngularJS?

Roteamento em AngularJS É um método que permite criar aplicativos de página única (SPA). Ele possibilita a criação de diferentes tipos de aplicativos. URLO AngularJS permite exibir conteúdos diferentes em suas aplicações web. O roteamento também ajuda a mostrar múltiplos conteúdos dependendo da rota escolhida. Ele é especificado no arquivo `routing.js`. URL após o sinal #.

Vamos pegar como exemplo um site hospedado através do URL http://example.com/index.html.

Esta página exibe a tela principal do seu aplicativo. Suponha que o aplicativo organize um evento e o usuário queira listar os eventos, visualizar um em detalhes ou excluir um. Em um aplicativo de página única com roteamento habilitado, tudo isso está disponível por meio dos seguintes links.

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

• Para visualizar todos os eventos, o usuário é direcionado para http://example.com/index.html#ShowEvent
• Para presenciar um evento específico, eles são direcionados para http://example.com/index.html#DisplayEvent
• Para excluir um evento, eles são direcionados para http://example.com/index.html#DeleteEvent

Observe que o principal URL permanece o mesmo. Apenas o fragmento após o # muda, e é esse fragmento que o AngularJS monitora. Com o conceito estabelecido, a próxima seção aborda os elementos que você precisa conectar para que tudo funcione.

Adicionando rota AngularJS usando $routeProvider

Conforme discutido anteriormente, rotas em AngularJS São utilizadas para direcionar o usuário para uma visualização diferente do seu aplicativo. Esse direcionamento é feito na mesma página HTML, de modo que o usuário tenha a impressão de não ter saído da página.

Para implementar o roteamento, os seguintes passos principais devem ser implementados em sua aplicação, em uma ordem específica.

1. Consulte angular-route.js. Isto. JavaScript arquivo, desenvolvido por Google, contém toda a funcionalidade de roteamento e deve ser incluído para que o aplicativo possa referenciar os módulos de roteamento necessários.
2. Adicione uma dependência ao módulo ngRoute em sua aplicação. Sem essa dependência, o roteamento não poderá ser utilizado na aplicação AngularJS.

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']);

3. Configure seu `$routeProvider`. Isso fornece as várias rotas em sua aplicação, e a sintaxe simplesmente indica que, quando o caminho relevante for escolhido, a rota será usada para exibir a visualização especificada.

when(path, route)

4. 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/>

5. 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.

💡 Dica: Todos os cinco passos são obrigatórios. A ausência de uma referência ao arquivo angular-route.js é o motivo mais comum para uma rota não executar nenhuma ação, pois o $routeProvider não existe sem ela. A próxima seção reúne os cinco passos em um exemplo funcional.

Exemplo de roteamento AngularJS

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

Em nosso exemplo de roteamento AngularJS com parâmetros,

• Um dos links serve para exibir os tópicos de um AngularJS 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 rotas é necessário para utilizar as funcionalidades de múltiplas rotas e visualizações. Ele pode ser baixado do site do AngularJS.

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

Code Explicação:

1. Inclua o módulo “ngRoute”. Com ele instalado, o Angular lida com o roteamento automaticamente e entende todos os comandos de roteamento.
2. O `$routeProvider` é um serviço que fica em segundo plano escutando as rotas que são chamadas. Quando o usuário clica em um link, ele detecta isso e decide qual rota seguir.
3. Crie uma rota para o link do Angular: quando ele for clicado, injete o Angular.html e use o 'AngularController' para a lógica de negócios.
4. Crie uma rota para o link do Node, que injete o Node.html e use o 'NodeController' da mesma forma.

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Correções aplicadas. O <title> etiqueta estava dentro <body>, chrset="UTF 8" estava escrito incorretamente, o segundo link apontava para #Node.html em vez da rota registrada /Node, e os caminhos dos modelos carregavam uma barra inicial que era resolvida a partir da raiz do domínio.

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.

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

• Angular.html

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

• Nó.html — idêntico à listagem acima, com o título alterado para “Nó”. Ambos os modelos são iguais. tutorial variável, que cada controlador fornece a partir de seu próprio escopo.

⚠️ Correção: O título no arquivo Angular.html original era “Angular”. A grafia foi corrigida acima.

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

Saída:

Ao clicar no link "Tópicos do AngularJS", a seguinte saída 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.
• Observe também que a página URL permanece a mesma. Apenas o caminho após a tag # muda, e esse é o conceito de aplicativos de página única. A tag # no URL É um separador entre a rota (que em nosso caso é 'Angular') e a página HTML principal (Sample.html).

O exemplo funciona apenas enquanto o usuário clicar em um link que corresponda a uma rota registrada. A próxima seção aborda o que deve acontecer quando nenhuma rota corresponder.

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 caso nenhuma das rotas existentes corresponda.

otherwise({
  redirectTo: 'page'
});

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

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

Code Explicação:

1. Aqui, estamos usando o mesmo código de antes, com a única diferença de que estamos usando a instrução `otherwise` e ​​a opção `redirectTo` para especificar qual visualização deve ser carregada caso nenhuma rota seja especificada. No nosso caso, queremos que a visualização '/Angular' seja exibida.

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

Saída:

Da saída,

• É possível ver claramente que a visualização padrão exibida é a visualização do AngularJS.
• 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'.

Uma rota padrão decide qual visualização será carregada. A próxima seção aborda como uma única rota pode servir vários registros, carregando um valor no... URL.

Como acessar parâmetros da rota AngularJS

O Angular também oferece a funcionalidade de passar parâmetros durante o roteamento. Os parâmetros são adicionados ao final da rota no arquivo `route.php`. URL, por exemplo, http://guru99/index.html#/Angular/1. Neste exemplo de roteamento Angular,

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

A sintaxe geral é Página HTML#/rota/parâmetro, então os tópicos anteriores se tornam Sample.html#/Angular/1, #/Angular/2 e #/Angular/3, onde o dígito é o topicid.

Vamos analisar em detalhes como podemos implementar uma rota Angular com um parâmetro.

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

1. Adicione uma tabela para mostrar todos os tópicos do curso de Angular JS ao usuário.
2. Adicione uma linha à tabela para exibir o tópico “Controladores”. Para esta linha, defina o href como “#!/Angular/1”, de forma que clicar no tópico passe o parâmetro 1 no URL juntamente com o percurso.
3. Adicione uma linha para o tópico “Modelos”, com o href definido como “#!/Angular/2” para que o parâmetro 2 seja exibido corretamente. URL.
4. Adicione uma linha para o tópico “Diretivas”, com o href definido como “#!/Angular/3” para que o parâmetro 3 seja exibido corretamente. URL.

Etapa 2) Adicione o ID do tópico na função de serviço routeProvider
Na função de serviço routeProvider, adicione o :topicId marcador de posição para indicar que qualquer parâmetro passado no URL Após a rota, ela deve ser atribuída à variável topicId.

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

1. Ao definir a função do controlador, certifique-se de adicionar primeiro o parâmetro “$routeParams”. Esse parâmetro terá acesso a todos os parâmetros de rota passados ​​na requisição. URL.
2. A variável “$routeParams” contém o topicId passado na rota. Anexando $routeParams.topicId ao escopo como $scope.tutorialid disponibiliza-o para a visualização como tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

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

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

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Correções aplicadas. O original usava a letra l em vez do dígito 1 in href="#Angular/l", omitiu o ng-view contêiner, então o modelo não tinha onde renderizar e foi carregado. angular-route.js antes angular.min.js, que gera um erro de módulo.

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

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

Saída:

Na tela de saída,

• Se você clicar no link Detalhes do Tópico para o primeiro tópico, o número 1 será adicionado ao URL.
• Esse número é usado como argumento "routeParams" e fica acessível no controlador.

Ler um parâmetro é simples. Recuperar o registro que o parâmetro identifica, antes que a visualização apareça, é a função da propriedade abordada a seguir.

Como pré-carregar dados com a propriedade `resolve`

O controlador da seção anterior lê um ID de tópico e o exibe imediatamente. Aplicações reais precisam primeiro buscar o registro em um servidor e, se a visualização for renderizada antes que essa solicitação retorne, o usuário verá um modelo vazio que será preenchido um instante depois. resolve A propriedade remove aquele flash de conteúdo vazio.

Cada chave dentro de um resolve O objeto é uma dependência que o AngularJS prepara antes da ativação da rota. Se o valor for uma promessa, o roteador aguarda sua resolução. Somente após todas as promessas serem resolvidas, o AngularJS instancia o controlador e renderiza o template, e os valores resolvidos são injetados no controlador por nome, exatamente como em qualquer outro serviço.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Dois comportamentos são importantes aqui. Uma promessa rejeitada cancela a mudança de rota e mantém o navegador na visualização atual, portanto, uma solicitação com falha nunca produz uma página quebrada. No entanto, como o roteador bloqueia enquanto a promessa está pendente, um endpoint lento faz com que o aplicativo pareça congelado. resolve com um indicador de progresso impulsionado pelo $routeChangeStart e $routeChangeSuccess eventos.

⚠️ Atenção: Nunca coloque verificações de autenticação apenas dentro de resolveRejeitar uma rota oculta uma visualização, mas não protege os dados subjacentes, e o endpoint da API ainda precisa impor o acesso no servidor.

Além do pré-carregamento de dados, uma rota também pode transportar valores de configuração estáticos. O serviço descrito a seguir mostra como um controlador os lê.

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 um parâmetro quando a função é definida no controlador. A sintaxe geral de como o parâmetro `$route` é disponibilizado pelo controlador é mostrada abaixo.

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

1. myApp é o módulo AngularJS definido para sua aplicação.
2. MyController é o nome do controlador definido para sua aplicação.
3. Assim como `$scope` passa informações do controlador para a visualização, `$route` expõe as propriedades da rota atual.

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 associar essa variável à nossa rota. Later Vamos acessar essa string a partir do nosso controlador usando o serviço `$route` e, em seguida, usar 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.

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

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Se o código for executado com sucesso, a seguinte saída será exibida 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.

Cada URL Até o momento, o símbolo # ainda está presente. A etapa final de configuração o remove.

Habilitando roteamento HTML5

O roteamento HTML5 é usado para criar rotas limpas. URLs. Significa a remoção da hashtag do URLEntão, o roteamento URLQuando o roteamento HTML5 é utilizado, a aparência seria semelhante à mostrada abaixo.

Exemplo.html/Angular/1

Exemplo.html/Angular/2

Exemplo.html/Angular/3

Esse conceito é normalmente conhecido como apresentar algo bonito URL para o usuário.

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

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

Vamos analisar detalhadamente como executar os passos mencionados acima em nosso exemplo.

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

1. Adicionar uma <base> Adiciona a tag ao cabeçalho do documento. Isso é necessário para o roteamento HTML5, para que o aplicativo saiba qual é a sua localização base.
2. Adicione o serviço `$locationProvider`. Este serviço permite definir o `html5Mode`.
3. Defina o html5Mode do serviço $locationProvider como verdadeiro.

Passo 2) Remova todas as tags # dos links ('Angular/1', 'Angular/2', 'Angular/3') para facilitar a leitura. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Correção: o original declarou um baseUrl constante apontando para um caminho de IDE local, o que não tem efeito no html5Mode. O AngularJS lê a localização base do <base href> etiqueta. O original também injetou $locationProvider sem nunca ligar html5Mode(true)Portanto, o hash nunca foi removido.

Se o código for executado com sucesso, a seguinte saída será exibida 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.

Tudo acima utiliza o ngRoute, o roteador fornecido pela equipe do AngularJS. Ele não é a única opção, e a comparação abaixo explica quando a alternativa é mais adequada.

ngRoute vs ui-router: Qual roteador escolher?

ngRoute é mantido pela equipe do AngularJS e corresponde a um URL diretamente para um único modelo e controlador. O ui-router é um projeto da comunidade criado para remover a principal limitação do ngRoute: ele faz a correspondência com base na aplicação. estado em vez de no URL sozinho, o que permite que uma tela contenha várias regiões roteadas independentemente.

Escolha ngRoute quando cada URL Mapeia para uma visualização de página inteira, já que não precisa de dependências extras e toda a API cabe em uma única página. Escolha o ui-router quando uma tela tiver painéis que navegam independentemente ou quando as visualizações filhas precisarem reutilizar dados carregados por uma visualização pai. Migrar posteriormente é possível, mas não trivial, porque os nomes de estado são substituídos. URL padrões em todos os modelos.

Erros comuns de roteamento no AngularJS e como corrigi-los

A maioria das falhas de roteamento produz uma ng-view em branco em vez de um erro no console, o que dificulta o diagnóstico. Cada sintoma abaixo indica sua causa e sua solução.

• Provedor desconhecido: $routeProvider: O arquivo angular-route.js nunca foi carregado, ou foi carregado antes do angular.min.js. Referencie a biblioteca principal primeiro.
• A visualização permanece em branco, sem exibir nenhum erro: Nenhum elemento possui a diretiva ng-view, portanto o modelo não tem onde ser renderizado.
• Nada carrega na primeira visita: Nenhuma rota corresponde ao caminho vazio. Adicione um bloco `after` com um valor `redirectTo`.
• $routeParams está vazio: O padrão está sem o marcador de dois pontos. Deveria ser '/Angular/:topicId'.
• Modelos 404 após html5Mode: Configure o servidor para reescrever os caminhos não correspondentes para a página base e confirme se a tag href base está presente.
• O controlador nunca executa novamente: Como apenas o parâmetro foi alterado, o AngularJS reutilizou a instância do controlador em vez de recriá-la. Em vez de depender da execução da função do controlador novamente, fique atento ao evento `$routeUpdate`.

Perguntas Frequentes