Bienvenidos en esta clase vamos a ver las rutas en Angular utilizando rutas podemos dividir nuestra
aplicación en diferentes secciones o áreas, las cuales se podrían llevar páginas, pero en realidad
no son páginas aisladas.
Recordemos que una aplicación en Angular es en una sola página S.p.A.
Single Page Apliqué hecho, es decir, tenemos una sola página para renderizar páginas diferentes y
Angular utiliza esta técnica como Ruthy.
Entonces la idea es dentro de esta página a través de rutas anidar un contenido de un componente que
esté mapeado a una u rl.
El siguiente paso sería indicar a Angular Caireles se tienen que mapear o asignar a nuestros componentes
tal como lo hacemos con Spring.
Cuando veamos un controlador a una ruta o °l.
Ahora tenemos que mapear un componente, por ejemplo el componente directivas del componente clientes
a una ruta u rl.
Nos vamos al app móvil.
Y acá tenemos que hacer la configuración, primero tenemos que importar el router móvil y también el
routes,
router module y routes from angular router y vamos a tener una constante.
Acá voy a copiar una constante que contiene un arreglo con las rutas del tipo routes, justamente que
estamos importando acá arriba en este arreglo de rutas.
Vamos a definir todas las rutas °l de cada componente de nuestra aplicación.
Por ejemplo, vamos a tener el path que contiene una VL.
Puede ser el nombre que queramos de nuestra ruta y lo manejamos o asignamos a un componente.
Por ejemplo cliente component está mapeado a la ruta clientes directiva component este mapeado a la
VL directiva y además acá tenemos un path vacío que sería nuestro home, nuestra página principal y
va a redirigir a clientes y pasamos el path match en full para que haga un match completo con lared.
El siguiente paso sería registrar en import estas rutas utilizando el router module
for root y acá pasamos la constante routes.
Y guardamos.
Eso sería todo lo que tenemos que configurar en el app mogol.
El siguiente paso en el app component en nuestro componente principal en la vista, en vez de tener
acá el Ardientes, se lo vamos a quitar.
Vamos a tener una directiva especial para cargar las rutas router outlet.
Simplemente es una directiva de Angular utilizada para indicar dónde se van a renderizar y mostrar el
contenido de cada ruta, de cada ruta que seleccionamos.
Vamos a guardar y el siguiente paso es modificar el componente IDER para agregar los links.
Nos vamos a home.
Vamos a quitar acá el activ.
Quitamos el activ y vamos a copiar completamente el link, incluyendo los li.
Entonces acá lo pegamos.
Vamos a quitar el href y en vez de oum vamos a tener acá directivas.
Luego, utilizando la directiva Router Link, vamos a agregar el link.
Y acaba la ruta jureles que tenemos tapiada.
Recordemos que en el amor directivas componen este mapeados a directivas.
Esa sería la ruta que tiene que ir en el link en el router link.
Además podemos colocar otra directiva para dejar marcado el enlace en nuestro menú utilizando etilo
buta.
Entonces con router link activ
activ es igual.
Entonces cada vez que se selecciona esta ruta se va a marcar este link como una página activa.
Vamos a copiar, lo pegamos y colocamos clientes,
clientes y eso es todo.
Ya tenemos implementada las diferentes rutas para los distintos componentes.
Criticabas y cliente.
Guardamos y vamos a levantar el servidor.
Se fija en que automáticamente redirige a clientes y que ha marcado.
Si nos vamos a directivas cambia la página y queda marcado como activo el link directivas cliente directiva.
Entonces de esa forma podemos tener nuestras propias rutas que carga y están mapeado los distintos componentes.
Si se fijan, en ningún momento se está actualizando la página y siempre nos mantenemos en una sola
página.
Pero lo que cambia es el contenido principal, en este caso a través de la directiva router outlet que
la tenemos dentro de la plantilla principal.
AP.
Component.
HTML.
Eso es todo.
Es bastante simple.
Bien que hagamos hasta acá.
Y cualquier duda que tengan la revisamos en el foro.
Hasta la próxima.