Configuración de Enrutamiento en Angular
Para que todo funcione, debes indicarle a Angular qué URL muestra qué componente. Esto se llama enrutamiento. ¡Comencemos!
El archivo principal de enrutamiento
Cuando creas una aplicación Angular usando la CLI, puedes habilitar el enrutamiento desde el principio — solo responde "Sí" cuando se te pregunte sobre el enrutamiento. Angular creará entonces los archivos necesarios por ti (lo cual ya hicimos al crear la aplicación). Uno de esos archivos es app.routes.ts.
Si por alguna razón no tienes este archivo, no te preocupes — puedes crearlo tú mismo en la carpeta raíz de tu proyecto. Debería verse así:
routes.ts
Este archivo indica a Angular qué rutas existen en tu aplicación y qué componentes mostrar para cada ruta.
Además, asegúrate de que tus rutas estén conectadas en app.config.ts de la siguiente manera:
config.ts
Sin la línea provideRouter(routes), Angular no reconocerá tus rutas, incluso si están definidas en app.routes.ts.
Configuración de rutas
Ahora agreguemos rutas para nuestra aplicación Task Tracker. Abre app.routes.ts y escribe el siguiente código:
routes.ts
Esto es simplemente un arreglo de rutas que exportamos. Cada ruta es un objeto con las siguientes configuraciones:
-
path— la ruta de la URL; -
component— el componente que se muestra al navegar a esa ruta.
En nuestro caso, tenemos dos rutas:
La página principal que muestra la lista de tareas.
routes.ts
Cuando un usuario visita la URL raíz (localhost:4200/), Angular mostrará el TaskListComponent.
Página de detalles de la tarea que muestra información sobre una tarea individual:
routes.ts
Aquí, :id es un parámetro dinámico. Angular interpreta que :id puede ser cualquier valor (como /task/1, /task/42, etc.). Este valor se pasa automáticamente a TaskDetailsComponent, y puedes utilizarlo para obtener los datos de esa tarea específica.
Así, cuando un usuario accede a localhost:4200/task/1, Angular mostrará TaskDetailsComponent con los detalles de la tarea №1.
Por ahora, nada funcionará todavía porque solo hemos definido las rutas, pero no las hemos conectado completamente con nuestros componentes. ¡Hagámoslo en el próximo capítulo!
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Configuración de Enrutamiento en Angular
Desliza para mostrar el menú
Para que todo funcione, debes indicarle a Angular qué URL muestra qué componente. Esto se llama enrutamiento. ¡Comencemos!
El archivo principal de enrutamiento
Cuando creas una aplicación Angular usando la CLI, puedes habilitar el enrutamiento desde el principio — solo responde "Sí" cuando se te pregunte sobre el enrutamiento. Angular creará entonces los archivos necesarios por ti (lo cual ya hicimos al crear la aplicación). Uno de esos archivos es app.routes.ts.
Si por alguna razón no tienes este archivo, no te preocupes — puedes crearlo tú mismo en la carpeta raíz de tu proyecto. Debería verse así:
routes.ts
Este archivo indica a Angular qué rutas existen en tu aplicación y qué componentes mostrar para cada ruta.
Además, asegúrate de que tus rutas estén conectadas en app.config.ts de la siguiente manera:
config.ts
Sin la línea provideRouter(routes), Angular no reconocerá tus rutas, incluso si están definidas en app.routes.ts.
Configuración de rutas
Ahora agreguemos rutas para nuestra aplicación Task Tracker. Abre app.routes.ts y escribe el siguiente código:
routes.ts
Esto es simplemente un arreglo de rutas que exportamos. Cada ruta es un objeto con las siguientes configuraciones:
-
path— la ruta de la URL; -
component— el componente que se muestra al navegar a esa ruta.
En nuestro caso, tenemos dos rutas:
La página principal que muestra la lista de tareas.
routes.ts
Cuando un usuario visita la URL raíz (localhost:4200/), Angular mostrará el TaskListComponent.
Página de detalles de la tarea que muestra información sobre una tarea individual:
routes.ts
Aquí, :id es un parámetro dinámico. Angular interpreta que :id puede ser cualquier valor (como /task/1, /task/42, etc.). Este valor se pasa automáticamente a TaskDetailsComponent, y puedes utilizarlo para obtener los datos de esa tarea específica.
Así, cuando un usuario accede a localhost:4200/task/1, Angular mostrará TaskDetailsComponent con los detalles de la tarea №1.
Por ahora, nada funcionará todavía porque solo hemos definido las rutas, pero no las hemos conectado completamente con nuestros componentes. ¡Hagámoslo en el próximo capítulo!
¡Gracias por tus comentarios!
