Um dos fundamentos do angular está em seu sistema de rotas. Nele é possível fazer a navegação entre telas sem trocar de página web. Essa técnica chamamos de Single Page Web Application ou  SPA.

O sistema de rotas do angular é robusto e oferece uma série de recursos interessantes as aplicações tais como:

• Passagem de parâmetro entre rotas.
• Carregamento sob demanda de módulos.
• Guardas para navegação condicionais ou impedir a navegação.
• Criar rotas filhas de componentes para uma hierarquia de navegação e sub navegação.

O sistema de rotas se encarrega de registrar e remover os componentes das páginas. Cada componente tem um ciclo de vida bem definido controlado pelo angular. Os principais ciclos podem se resumir a seguir:

Tabela 1. Principais Ciclos de Vida do Angular.

Elaborada pelo autor, em 2023.

Há mais ciclos de vida relacionados à mudança de estado do angular e seu databind, mas não iremos discutir nesta aula. Se o aluno quiser aprofundar neles pode acessar a página oficial disponível em ANGULAR (2023).

Nessa aula vamos abordar os recursos de passagem de parâmetro, guardas e subrotas. Vamos começar pelo exemplo mais simples que é passagem de parâmetro entre rotas, depois vamos ter uma abordagem mais prática na aplicação do seu uso.

Passando parâmetros nas rotas

Vamos supor que você tenha uma lista onde o usuário pode selecionar um item. A sua página de edição fica em outra rota, com isso é necessário passar como parâmetro o id do item selecionado para ser carregado na página de edição. Esse é um fluxo bem comum, uma forma alternativa seria carregar a página de edição em um modal, no entanto queremos a forma citada. Como fazê-lo?

As rotas no angular são URL’s que aceitam placeholders como parâmetros. Um placeholder, um local na string para preenchimento que o framework irá extrair para uma variável.

Aqui vale uma dica, o angular tem duas estratégias para controlar URL’s o HashLocationStrategy e o PathLocationStrategy. A diferença entre as duas é que o HashLocationStrategy usa aqueles links que começam com #, por exemplo #/usuário/adicionar. Isso faz com que ele sempre permaneça na mesma página, no entanto não é tão natural, por isso existe o PathLocationStrategy que gera uma url sem o # sendo nesse caso /usuário/adicionar. No entanto, o PathLocationStrategy exige uma configuração em seu servidor web, como o apache ou nginx, para funcionar, já que ao carregar a página pela primeira vez o servidor pode retornar um not found. Deixo como exercício ao leitor pesquisar como trocar o LocationStrategy no Angular.

Voltando ao placeholder, essa técnica permite que o usuário possa marcar como favorito uma rota e cair exatamente na página já com os dados carregados. A URL poderia ser algo do tipo: /pessoa-edit/1

Sendo que o /1 indicaria o id da pessoa a ser editada. Para criarmos esse placeholder usamos o :nomePlaceHolder na url da rota. Seguindo nosso exemplo criamos uma rota:

Note que chamamos o mesmo componente de adicionar pessoa. Esse é o nome do nosso formulário, e como é usado tanto para edição quanto para adição, poderíamos renomear para PessoaFormPageComponent.