Angular Routes

Nesse artigo iremos abordar três formas de utilizar rotas em um projeto com Angular. Existem outras formas, então analise qual a mais interessante para o seu caso de uso. Com base na documentação, criaremos um projeto e faremos a configuração de algumas rotas para vermos na prática alguns conceitos importantes.

Exemplo 1

1. O primeiro passo é criar o projeto configurado para utilizar a funcionalidade de Router do Angular. Para isso, execute o comando abaixo.

ng new routing-app --routing --defaults

2. Iremos agora criar dois componentes para que possamos navegar entre eles.

ng generate component components/first

Repita o comando acima, porem referenciando o segundo componente.

ng generate component components/second

3. Faça a importação desse dois componentes no arquivo de módulos que ira ser responsável por instanciar nossos dois componentes. No exemplo abaixo, importaremos diretamente no arquivo app.module.ts.

code 1.3.1

4. Agora precisamos adicionar o módulo de rotas do Angular no nosso app.module e configurar as rotas que serão utilizadas. Como criamos o nosso projeto utilizando a flag routing, podemos observar que o modulo já foi adicionado (imagem 3.1, linha 4), e este por sua vez eh uma referência ao arquivo de rotas, o app-routing.module.ts. Nesse arquivos iremos adicionar as informações mais especificas de nossas rotas.

code 1.4.1

Na constante denominada routes, que é do tipo Routes, adicionamos dois objetos que referenciam os componentes criados anteriormente.

5. Para podermos testar nossas configurações, limpe o arquivo app.component.html e adicione o trecho de código abaixo.

code 1.5.1

Note que nas tags a (anchor) temos a diretiva routerLink. Nela adicionamos o mesmo valor que definimos na constante routes, no arquivo app-routing.ts, na propriedade path de cada objeto de rota.

Agora basta rodar nosso projeto (ng serve) e podemos testar a funcionalidade de rotas dentro do Angular.

Exemplo 2

1. Iremos utilizar o mesmo projeto que criamos no Exemplo 1 . Porem iremos configurar as rotas de uma forma diferente. Para o Exemplo 2, criaremos dois componentes, que serão filhos do ‘FirstComponent’. Rode os comandos abaixo para criá-los.

ng g c components/child-a 
ng g c components/child-a

2. Após isso, mudaremos o objeto de rota que referencia o ‘FirstComponent’, no arquivo app-routing.ts. Ficará dessa forma:

code 2.1

3. O arquivo app.component.html continuará igual ao que fizemos no exemplo anterior (code 1.5.1). Porem no arquivo first.component.html faremos a seguinte alteração:

Note que agora além do selector router-outlet estar declarado no app.component.html, também temos ele no ‘FisrtComponent’, pois temos dentro deste componente uma navegação isolada, que pertence apenas à aquele contexto.

Basta rodar o comando ng serve e verá a magia acontecer! =D

Exemplo 3

Para esse ultimo exemplo criaremos módulos para nossos componentes e faremos a referencia a eles de uma forma diferente do que vimos até agora.

1. Primeiro criaremos os módulos para os componentes. Cada linha possui um comando, rode um por vez.

ng generate module components/first
ng generate module components/second

2. Após isso, no arquivo app.module.ts iremos remover todas referencias aos componentes que criamos. O arquivo ficara da seguinte forma:

3. Agora no arquivo app-routing.ts iremos modificar a forma como referenciamos nossos componentes. Ao invés de apontarmos diretamente para o componente em si, iremos referenciar o módulo dos nossos componentes.

Dessa forma estamos isolando melhor nossos components e removendo do arquivo app.module a todas referencias desnecessárias. Configurar dessa forma traz alguns benefícios: o projeto ficará melhor organizado e será mais fácil de entender a hierarquia definida no projeto; caso tenha necessidade de controle de acesso , será mais simples de definir quais módulos determinado usuário poderá acessar. Entre outros benefícios.

4. Ainda precisamos adequar os módulos que criamos para os componentes First e Second. Como agora os módulos estão isolados, precisamos importar o RouterModule, definir o caminho padrão e o componente que será renderizado.

first.module.ts

second.module.ts

Agora é só rodar ng serve e ver a magia acontecer, novamente. XD

Vimos então três formas de utilizar rotas, as duas primeiras mais básicas e a ultima um pouco mais perto do que se irá encontrar em projetos reais no dia a dia. Faça testes, pratique os exemplos propostos e melhore a lógica dos exemplos. Assim você irá conseguir fixar e entender como funcionam as rotas dentro do Angular.

Bons estudos! :)

https://angular.io/guide/router