Configurando o Roteamento no Angular
Para que tudo funcione, é 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 "Yes" quando solicitado sobre roteamento. O Angular criará então os arquivos necessários para você (o que já fizemos ao criar o aplicativo). Um desses arquivos é o app.routes.ts.
Se por algum motivo você não tiver esse arquivo, não se preocupe — é possível criá-lo manualmente na pasta raiz do seu 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, vamos adicionar rotas para nosso aplicativo Task Tracker. Abra 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 você pode usá-lo 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.
Neste 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, é 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 "Yes" quando solicitado sobre roteamento. O Angular criará então os arquivos necessários para você (o que já fizemos ao criar o aplicativo). Um desses arquivos é o app.routes.ts.
Se por algum motivo você não tiver esse arquivo, não se preocupe — é possível criá-lo manualmente na pasta raiz do seu 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, vamos adicionar rotas para nosso aplicativo Task Tracker. Abra 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 você pode usá-lo 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.
Neste 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!
