Cómo dividir nuestra aplicación en diferentes secciones utilizando rutas (routing)
Vamos a ver cómo dividir la app en diferentes secciones, como si fueran diferentes páginas, aunque no es así. Recordemos que la aplicaciones de Angular son del tipo SPA (Single Page Application).
Dentro de la página, mediante rutas, anidamos un contenido de un componente que esté mapeado a un componente. Evidentemente, tenemos que indicar qué url debemos mapear a cada componente.
Para esto vamos a ver cómo implementar RouterModule y Routes en nuestra app.
app.module.ts
Aquí, primero tenemos que importar RouterModule y Routes. Además, añadiremos una constante con todas las rutas. También añadimos el RouterModule en los imports. Quedaría así:
app.component.html
Vamos a utilizar router-outlet, que es una directiva de Angular para indicar dónde se va a mostrar el contenido de cada ruta.
En este caso yo tengo un header con los enlaces sobre los que se va a actuar, así que modifico el componente header, donde añado los links.
header.component.html
Añadimos el link utilizando la directiva routerLink. También podemos utilizar la directiva routerLinkActive para que se marque el enlace en el menú.
Así de sencillo. De esta forma hemos conseguido tener mapeados diferentes contenidos dentro de una misma página simplemente utilizando diferentes urls. Esto es el routing en Angular.
Deja una respuesta