Atualmente, nosso gerenciador de tarefas é uma simples Aplicação de Página Única (SPA). Ela sempre carrega a partir do mesmo endereço no navegador (localhost:4200) e exibe o mesmo conteúdo, independentemente do que aconteça.

No entanto, queremos avançar um pouco mais — permitindo que os usuários naveguem para diferentes seções do aplicativo usando URLs como /task/1, /settings ou /analytics. Ao navegar entre essas URLs, a página não deve ser recarregada — em vez disso, apenas o conteúdo deve ser atualizado dinamicamente dentro da mesma janela do navegador.

Essa abordagem é o que define uma SPA (Aplicação de Página Única) — toda a aplicação é carregada uma única vez, e toda a navegação subsequente ocorre trocando o conteúdo dinamicamente.

É rápida e amigável ao usuário, mas exige um sistema dedicado que compreenda como lidar com diferentes URLs. É aí que entra o roteamento.

O que é Roteamento?

No nosso gerenciador de tarefas, podemos ter diferentes seções como uma lista de tarefas e uma página de detalhes da tarefa. Por exemplo:

• Quando o usuário navega para /tasks, queremos exibir um componente com uma lista de tarefas;

• Quando ele acessa /tasks/42, queremos mostrar os detalhes da tarefa com ID 42.

O Angular lê a URL atual e decide qual componente exibir — tudo isso sem recarregar a página. Nos bastidores, ainda é o mesmo arquivo HTML, mas o conteúdo é substituído dinamicamente. Para o usuário, parece que ele está navegando em um site tradicional, mas tudo é tratado dentro da SPA.

Resumidamente, o roteamento nos permite informar à aplicação:

"Se o usuário acessar /tasks, exiba o TaskListComponent. Se ele acessar /tasks/42, exiba o TaskDetailsComponent."

Como o Roteamento Funciona no Angular

O Angular fornece uma ferramenta integrada chamada RouterModule que facilita o gerenciamento da navegação entre visualizações.

Para nosso rastreador de tarefas, o roteamento nos oferece muito poder:

• Definir rotas — por exemplo, vincular o caminho /tasks a um componente que exibe todas as tarefas;

• Navegar sem recarregar — acessar /tasks/15 e ver imediatamente os detalhes da tarefa 15;

• Exibir diferentes componentes com base na URL — como uma lista de tarefas, um formulário para nova tarefa ou configurações;

• Usar parâmetros de rota — como IDs de tarefas ou filtros (/tasks?status=done);

• Criar rotas aninhadas — por exemplo, configurações do usuário dentro de uma seção de perfil (/profile/settings);

• Proteger rotas — como exigir que usuários estejam logados para acessar /settings.

Na prática, basta definir um conjunto de regras: qual caminho deve carregar qual componente. O Angular cuida do restante, gerenciando a navegação e a renderização automaticamente.

Do ponto de vista do usuário, tudo funciona como um site comum — é possível clicar em links, usar os botões de voltar e avançar do navegador e até compartilhar links diretos para visualizações específicas no aplicativo.