Configurando o Roteamento no Angular
Para que tudo funcione corretamente, é necessário informar ao Angular qual URL exibe qual componente. Isso é chamado de roteamento.
O Arquivo Principal de Roteamento
Ao criar um aplicativo Angular usando o CLI, é possível habilitar o roteamento desde o início — basta responder "Sim" quando questionado sobre roteamento. O Angular criará então os arquivos necessários para você (o que já foi feito quando criamos o aplicativo). Um desses arquivos é o app.routes.ts.
Se por algum motivo esse arquivo não existir, não se preocupe — é possível criá-lo manualmente na pasta raiz do projeto. Ele deve ter a seguinte aparência:
routes.ts
Este arquivo informa ao Angular quais rotas existem em seu aplicativo e quais componentes exibir para cada rota.
Além disso, certifique-se de que suas rotas estejam conectadas em app.config.ts da seguinte forma:
config.ts
Sem a linha provideRouter(routes), o Angular não reconhecerá suas rotas, mesmo que estejam definidas em app.routes.ts.
Configurando Rotas
Agora, adicione rotas para o nosso aplicativo Task Tracker. Abra o arquivo app.routes.ts e escreva o seguinte código:
routes.ts
Isto é apenas um array de rotas que exportamos. Cada rota é um objeto com as seguintes configurações:
-
path— o caminho da URL; -
component— o componente exibido ao navegar para esse caminho.
No nosso caso, temos duas rotas:
A página principal exibindo a lista de tarefas.
routes.ts
Quando um usuário acessa a URL raiz (localhost:4200/), o Angular exibirá o TaskListComponent.
Página de detalhes da tarefa exibindo informações sobre uma única tarefa:
routes.ts
Aqui, :id é um parâmetro dinâmico. O Angular entende que :id pode ser qualquer valor (como /task/1, /task/42, etc.). Esse valor é automaticamente passado para o TaskDetailsComponent, e pode ser utilizado para buscar os dados daquela tarefa específica.
Assim, quando um usuário acessa localhost:4200/task/1, o Angular exibirá o TaskDetailsComponent com os detalhes da tarefa nº1.
No momento, nada funcionará ainda porque apenas definimos as rotas, mas não as conectamos totalmente aos nossos componentes. Vamos fazer isso no próximo capítulo!
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 3.13Configurando o Roteamento no Angular
Deslize para mostrar o menu
Para que tudo funcione corretamente, é necessário informar ao Angular qual URL exibe qual componente. Isso é chamado de roteamento.
O Arquivo Principal de Roteamento
Ao criar um aplicativo Angular usando o CLI, é possível habilitar o roteamento desde o início — basta responder "Sim" quando questionado sobre roteamento. O Angular criará então os arquivos necessários para você (o que já foi feito quando criamos o aplicativo). Um desses arquivos é o app.routes.ts.
Se por algum motivo esse arquivo não existir, não se preocupe — é possível criá-lo manualmente na pasta raiz do projeto. Ele deve ter a seguinte aparência:
routes.ts
Este arquivo informa ao Angular quais rotas existem em seu aplicativo e quais componentes exibir para cada rota.
Além disso, certifique-se de que suas rotas estejam conectadas em app.config.ts da seguinte forma:
config.ts
Sem a linha provideRouter(routes), o Angular não reconhecerá suas rotas, mesmo que estejam definidas em app.routes.ts.
Configurando Rotas
Agora, adicione rotas para o nosso aplicativo Task Tracker. Abra o arquivo app.routes.ts e escreva o seguinte código:
routes.ts
Isto é apenas um array de rotas que exportamos. Cada rota é um objeto com as seguintes configurações:
-
path— o caminho da URL; -
component— o componente exibido ao navegar para esse caminho.
No nosso caso, temos duas rotas:
A página principal exibindo a lista de tarefas.
routes.ts
Quando um usuário acessa a URL raiz (localhost:4200/), o Angular exibirá o TaskListComponent.
Página de detalhes da tarefa exibindo informações sobre uma única tarefa:
routes.ts
Aqui, :id é um parâmetro dinâmico. O Angular entende que :id pode ser qualquer valor (como /task/1, /task/42, etc.). Esse valor é automaticamente passado para o TaskDetailsComponent, e pode ser utilizado para buscar os dados daquela tarefa específica.
Assim, quando um usuário acessa localhost:4200/task/1, o Angular exibirá o TaskDetailsComponent com os detalhes da tarefa nº1.
No momento, nada funcionará ainda porque apenas definimos as rotas, mas não as conectamos totalmente aos nossos componentes. Vamos fazer isso no próximo capítulo!
Obrigado pelo seu feedback!
