Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular 2+
Code

Configurando Rotas Básicas no Angular 2

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Com o lançamento oficial do Angular 2, é uma boa hora para aprender suas maiores mudanças.

Algo bastante mudado é o roteador do Angular 2, substituido completamente na versão final. Assim, nesses dois rápidos vídeos tutoriais do meu curso sobre Roteamento no Angular 2, mostraremos como criar configuração de rotas e usá-las em seu aplicativo. Falaremos de rotas simples, redirecionamento e rotas curinga. Então veremos como usar diretivas para configurar o componente do seu app para visualizar rotas.

Os vídeos dão continuidade às lições anteriores do curso, mas é possivel seguir as técnicas que usamos neles. É possível encontrar os arquivos fontes do projeto no Github.

Como Criar Rotas no Angular 2

Por Que Usar Roteamento?

É possível construir um aplicativo inteiro em Angular 2 sem rotas. Se podemos fazer isso, por que precisaríamos de rota, então?

A razão é que, caso não usemos rotas, nosso aplicativo dependerá apenas de navegação através de ações diretas. Teremos de alterar os componentes com base na interação do usuário, por exemplo, ao clicarem em algo.

Com rotas, seremos capazes de navegar através de URLs. Todos os componentes serão mapeados a uma rota, permitindo movimentar-nos pelo aplicativo.

Como Configurar Rotas

Primeiro, para fazer as rotas funcionarem, precisamos adicionar a URL base no cabeçalho do arquivo index.html.

add a base href in the head of our indexhtml file

Antes, configuraríamos nossas rotas dentro do componente que as hospeda. Nesse caso, significaria adicionar as configurações de rota ao arquivo app.component. Com o novo roteamento, é sugerido criar um arquivo de configuração de rotas separado.

app.routes.ts

Criemos um arquivo chamado app.routes.ts no diretório raiz do aplicativo.

A primeira coisa a fazer é adicionar as importações.

Primeiro, importe providerRouter e RouterConfig do módulo Angular router. Então, importemos os componentes About, Error e Home do diretório pages. Precisamos importá-los para podermos criar rotas para eles.

Add imports to approutests

Depois, criaremos nossa configuração de rota para conter nossas rotas:

Aqui, usamos uma const. Essa é uma das formas de declarar variáveis no TypeScript e representa um valor que não poder ser alterado. Nesse caso, usaremo-na para guardar nosso RouterConfig.

Primeiro, adicionaremos um redirecionamento. Agora, colocaremos uma rota coringa para a página de erro. Isso fará o aplicativo começar de uma página de erro. Isso acontece porque ao iniciar, o aplicativo não possui rotas. Assim, precisamos especificar um componente como rota padrão.

Poderíamos adicionar qualquer componente para iniciar o aplicativo na rota vazia, mas a forma sugerida para isso é usar um redirecionamento. O redirecionamento deve vir primeiro ou não funcionará. Eis como fica:

code for the redirect

Primeiro o caminho, que é uma rota vazia. Essa será a rota inicial do aplicativo. Depois temos o redirecionamento, que alterará nosso caminho para a home ao encontrar a rota vazia. Depois, temos o pathMatch. Não detalharemos muito. Basta saber que isso fará a rota vazia casar nosso redirecionamento.

Depois temos nossa rota apontando para AboutComponent. O caminho configurado é o 'about', que é o que veremos na barra de endereços ao navegar para essa rota. O componente para o qual navegaremos será o AboutComponent. Logo após, temos o HomeComponent. O caminho é 'home' e o componente será o HomeComponent.

Essa será a rota a ser navegada após o redirecionamento. E a última rota adicionada é a rota coringa. Ela casará qualquer rota que definirmos. É por isso que também adicionamos o redirecionamento. Se não tivéssemos, o apliativo começaria nessa rota, já que inicia de uma rota não definida, uma rota vazia.

Após adicionar o redirecionamento, qualquer rota que não existir parará na página de erros. Então, exportamos outra constante usando o método de roteamento provido no roteador do Angular. Usamos as rotas configuradas com esse método.

Ao fazermos isso, nossas rotas estão finalizadas. A última coisa que precisamos fazer é adicioná-las ao aplicativo.

main.ts

Vá ao arquivo main.ts. O primeiro a fazer é importar o arquivo myRouterProviders do arquivo de rotas do aplicativo que criamos. Então, adicionaremo-no à nossa função de inicialização. Assim, as rotas estarão disponíveis para todos os componentes do nosso aplicativo.

Adding routing to the app in the maints file

Feito isso, terminamos de configurar as rotas. No próximo vídeo, finalizaremos a configuração de roteamento e pré-visualizaremos o aplicativo.

Como Hospedar Rotas no Angular 2

Configurando o App para Hospedar as Rotas

Já configuramos nossas rotas e adicionamo-nas à função de inicialização. Agora, só precisamos configurar nossa componente de aplicação para hospedar as rotas.

Eis como o app.component.ts deve ficar:

Code for the file appcomponentts

Primeiro, importamos nossas diretivas de rotas. Já vimos isso antes quando precisamos usar um link de rota. Esse componente usará a rota e outra diretiva de saída do roteador do Angular 2. Depois, removeremos o modelo e adicionaremos um modelo (template) do ES6. Assim, criaremos um modelo de várias linhas.

Primeiro, criaremos uma div para a barra de navegação do bootstrap. Essa barra aparecerá em todas as páginas, já que faz parte do modelo. Dentro dela, adicionaremos nossa marca. Pode ser texto ou imagem e representará a marca do aplicativo.

Então, adicionaremos uma lista não ordenada. Dentro, adicionaremos nossos links de navegação. Nos links, ao invés de URLs, usaremos o routerLink. É assim que navegaremos pelas rotas com interação de usuário. Agora, podemos ir a rota inicial ao clicarmos nesse botão.

Também podemos escrever o routerLink de outra forma, em um vetor. Normalmente, fazemos isso quando queremos prover mais informações para a rota. Também temos uma diretiva routerLinkActive, que aplicará a classe do menu quando o link da rota estiver ativa. Usamos isso para indicar visualmente em qual página estamos.

Adicionaremos outro link de rota para navegar para a página About. Então, adicionaremos a diretiva router-outlet. É por isso que os componentes não precisam de seletor. Quando são carregados para roteamento, essa diretiva hospedará os componentes. Enquanto o resto do modelo parecerá estático em cada página, o router-outlet mudará de acordo com a rota escolhida. Por fim, adicionaremos as diretivas de rota.

Após isso, o que precisamos fazer é adicionar uma regra CSS ao arquivo style.css:

Essa regra é para a classe que será adicionada quando a rota adicionada estiver ativa. O plano de fundo do link será branco. E agora, o roteamento está configurado.

Testando o Roteamento

Vá em frente, salve o projeto e execute npm start no diretório do projeto.

Se tudo correr direito, o aplicativo deverá compilar e abrir no navegador.

Home page

Se perceber, o plano de fundo do link home está branco. Exatamente por ser a rota ativa no momento. Então, se clicarmos no botão About, iremos para a página About.

About page

Após isso, digitaremos uma rota inexistente. Ao fazermos isso, iremos para a página de erro.

error page

Agora, temos um app com roteamento funcionando, mas há muito mais que podemos fazer. No resto desse curso, aprofundaremo-nos muito mais.

Veja o Curso Completo

No curso completo, Roteamento em Angular 2, ensinaremos como usar o roteamento do Angular 2 nos aplicativos. Você verá como configurar rotas básicas para páginas estáticas, como extrair parâmetros do caminho da rota e como tornar seu roteamento modular. Também verá como controle de acesso de usuários pode ser implementado com roteamento do Angular 2.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.