Jornada Frontend

O que é Routing Angular?

É uma maneira simples de navegar nas páginas do nosso app.

Tecnicamente não temos múltiplas páginas no Angular, apenas carregamos diferentes componentes, desta forma economizamos dados e fazemos a página parecer diferente.

Como configurar o projeto para Routes

Vamos criar 3 componentes e daremos os seguintes nomes “principal”, “sobre” e “usuário” iremos usar o CLI para isso.

Vamos criar uma pequena lista para ficar mais fácil a navegação das “páginas”.

Se olharmos no browser vemos os três componentes já carregados e não é bem o que queremos agora, vamos carregar apenas um componente específico ao clicar no link.

A primeira coisa é criar um Array de URL para associar os caminhos aos componentes correspondentes.

No arquivo app.routing.module.ts iremos criar um array const chamada “appRoutes” do tipo Routes e assim também importaremos o “@angular/router”.

O Array espera um objeto JavaScript com as URL path e os componentes correspondentes. Pra isso vamos usar as key “path” e “component”.

O caminho com o path vazio é o nosso domínio padrão.

Não é suficiente apenas as rotas no Array, precisamos dizer ao Angular que esse array de rotas deve ser usado.

Vamos importar o RouterModule do “@angular/router”.

Para registrar uma rota devemos usar o método “RouterModule.forRoot()” nos imports do @NgModule. Precisamos dar um argumento a esse método, que em nosso caso é o array com o nome de “appRoutes”.

Para que isso funcione não iremos usar o seletor de componente, ao invés disso iremos usar o “router-outlet”, que é um directiva que diz ao Angular que queremos mostrar apenas o componente que está disponível na URL.

Agora o nosso Angular sabe que deve apenas carregar o componente correspondente a rota de acesso.

Podemos ver que apenas o componente principal está carregado, porém a navegação não está funcionando, mas caso a gente digite manualmente a URL o componente já está funcionando.

Como navegar com o Router links?

Para fazer a navegação entre links precisamos  vincular um event do link a um button ou imagem a uma rota.

Precisamos trocar o “href” para a diretiva “routerLink”.

Podemos também colocar uma string de array com o nome das rotas com os parâmetros.

Para melhor entendimento vamos adicionar as duas maneiras dentro do nosso arquivo.

Agora sim nossos componentes somente são carregados aqueles que são correspondentes ao próprio caminho.

Style no Router

Angular também tem o “routerLinkActive” que é uma diretiva para estilizar nossos links ativados baseado na rota selecionada.

A diretiva recebe a classe CSS e é inserida no próprio link, imagem ou botão, ou um elemento encapsulado (wrapper).

Vamos trabalhar com um CSS simples, que muda apenas o background dos elementos.

Neste caso podemos adicionar no arquivo “app.componente.css” ou usar o arquivo global “styles.scss”.

Neste caso iremos optar pelo “styles.scss”.

Agora é só colocar eles em nossos elementos.

Podemos ver que o estilo está sendo colocado nos links ativos. Porém temos um problema que a página Principal sempre está com o estilo. Isso porque a diretiva por padrão considera o link ativa caso ele esteja na URL.

Precisamos configurar a diretiva e para isso vamos usar o “routerLinkActiveOptions” no elemento que queremos configurar.

Setamos como true, pois assim especificamos para o Angular que só é considerado o link ativo caso ele realmente esteja no caminho exato.

Agora o link “principal” não é considerado ativo caso esteja em outras páginas.

Como navegar nas Routes automaticamente

Vamos a um exemplo, ao logar na aplicação automaticamente somos redirecionado a outra página.

Começaremos adicionando um botão de login em nosso componente chamado “principal”.

Vamos imaginar que esse método de login faz toda a autenticação do usuário.

No método “onLogin()” que será executado pelo nosso button, será usado o “navigate()” que especifica para onde será redirecionado o usuário.

Esse método leva Link Parameters array como argumento e cada segmento do “path” é separado por um elemento.

Child Route

Vamos dizer que nosso componente “sobre” se torne um “Sobre Mim” com as informações e somente seja carregado no componente “usuario”.

Podemos simplesmente aninhar o componente “sobre” dentro do componente “usuario”. Ao invés de ser “/sobre”, se tornará “/usuario/sobre”.

Vamos fazer as configurações no arquivo “app.routing.module.ts”.

No exemplo acima o componente “usuario” será pai do “sobre”.

O componente “sobre” será carregado no “usuario”, vamos remover o link do nosso menu.

Vamos adicionar nossa “router-outlet” no componente “usuario”.

Usario.componente.html:

Agora se formos para o caminho “/usuario/sobre” nosso componente será carregado. Porém só é possível carregar digitando o caminho e vamos resolver isso.

Para manter nosso exemplo simples, vamos adicionar o “routerLink” e imagine que o item do sub-menu acessa e permite o usuário editar as informações sobre ele.

Como lidar com erros 404

Quando um usuário acessa uma rota inexistente ele recebe o erro 404, o que não quer dizer muito para o usuário. Vamos criar uma página customizada para lidar com esse tipo de situação.

Vamos começar criando nosso componente chamado “page-not-found”.

Na view vamos mostrar uma mensagem padrão:

Vamos adicionar nossa rota.

Agora vamos fazer a parte de redirecionar qualquer página que não exista para o nosso caminho “/page-not-found”. Vamos usar a propriedade “redirectTo”. A sintaxe é assim:

app.routing.module.ts:

No exemplo acima estamos redirecionando do “/pagina-que-nao-existe” para o nosso componente “/page-not-found”.

Como é insano a gente especificar cada caminho não existente no mundo, vamos usar o wildcard (coringa) e assim o Angular sabe que qualquer caminho que não esteja em nosso array de rotas será redirecionado.

O operador do wildcard é “**” e a sintaxe ficaria desta forma:

No app.routing.module.ts:

Agora quando o usuário acessar alguma rota que não esteja em nosso array de rotas, será redirecionado para o nosso componente page-not-found.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This