[MÚSICA] [MÚSICA] Hola a todos nuevamente. Bien. Ahora vamos a ver lo que serÃa la introducción a routing, al ruteo dentro de nuestra aplicación. Es decir, poder tener distintos componentes que se renderean directamente sobre la vista principal de la aplicación y poder navegar a través de los mismos. No solamente tener un componente principal que renderea todo un árbol de componentes dentro, sino que ese componente raÃz, el primer componente, el primer componente que renderea pueda ir cambiando. Y, de esa manera, darle una sensación de que conservamos un marco dentro de la aplicación donde siempre permanece constante pero el contenido va cambiando. Bien. Entonces, para eso, vamos a dirigirnos al archivo de módulo. El módulo de la aplicación, app.module. Y vamos a trabajar sobre el mismo. Primero vamos a portar lo que es el módulo de ruteo. Import from Angular router. Vamos a importar. Control espacio aquà nos sugiere todo lo que está definido dentro de dicho módulo. Entonces, vamos a usar el RouterModule y vamos a usar el Routes. ¿SÃ? Bien. Y vamos a declarar las rutas. Para eso, vamos a declarar un objeto const routes de tipo Routes. Y le vamos a asignar un valor por defecto, que va a ser un array, donde vamos a definir las rutas que va a usar nuestra aplicación. Vamos a usar, para esto, este objeto tiene algunos miembros, como path, redirectTo, pathMatch, asà que vamos a ir conociéndolo. Vamos. Path: vacÃo, es decir, el path en la aplicación, en la barra de direcciones de nuestro browser sin nada. Vamos a hacer un redirectTo a un path que vamos a crear ahora, que sea el home. Y vamos a usar el modificador pathMatch: full, que en este caso nos sirve para que matchee exactamente cuando está vacÃo. Lo vamos a crear el home y vamos a hacer que el home vaya al component, listaDestinos, listaDestinosComponent. Y le vamos a crear una ruta más de un componente nuevo que vamos a crear, que va a ser destino. Vamos a crear dicho componente. Vamos a hacer un generate aquÃ. Vamos a aprender un shortcut, que es generate component DestinoDetalle. [AUDIO_EN_BLANCO] Vamos a cerrar el app.module, porque lo va a modificar el comando, el comando que vamos a ejecutar modifica el app.module, asà que lo cerramos para que no haya ningún conflicto. Ahà agregó esto a un componente, aquà lo vemos. Y si abrimos el módulo, DestinoDetalle you fue agregado. Bien. Entonces, ahora vamos a utilizar este DestinoDetalle como componente de destino, como componente a renderear cuando me usa la ruta destino. Bien. Acá estamos conformando las rutas que vamos a escribir en la barra de direcciones. ¿Correcto? Bien. Estas rutas por ahora están definidas de una manera aislada en el archivo, asà que vamos a cargarlo a lo que son los imports del módulo. Vamos a cargarlo al RouterModule.forRoot(Routes) De esta manera, estamos registrando estas rutas que hasta ahora eran un objeto, una estructura de datos que tenÃamos ahà aislada en nuestro código. De esta manera estamos vinculando al decorador del módulo y estas pasan a ser ahora rutas registradas en el módulo. Bien. Este es todo el trabajo que tenemos que hacer a nivel de módulo. Vamos a pasar ahora a poner una pequeña barrita de navegación y el contenedor de nuestras vistas. Para eso, vamos al app.component.html. En el app.component.ts no tenÃamos nada en particular. En el app.component.html hasta ahora tenÃamos un header y rendereamos directamente la lista-destinos. Pero esto a partir de ahora justamente en vez de ser constante, va a empezar a ser variable. Para eso, tenemos que usar el control de router-outlet. Router-outlet lo que hace es, cuando detecta que yo estoy en un módulo, en un componente que está vinculado a un módulo, y ese módulo tiene vinculado un ruteador por código, por TypeScript, como hicimos antes en el app.module.ts, lo que uno elija y ese, la ruta que uno elija, y esa configuración de ruteador determine como componente correspondiente a esa ruta que uno tipeó, que uno ingresó, a donde uno se está dirigiendo, ese componente es el que va a ser rendereado en el router-outlet. Entonces, vamos ahora a hacer un pequeño header. Vamos a poner el header arriba de la fila de tÃtulo. Y vamos a poner un div, class, page-header. Dentro de esto vamos a hacer un div, class, container. Dentro de esto vamos a hacer un h1, Ruteo Simple. Y dentro de esto vamos a hacer unos nav links, class, navLinks. Y dentro de los nav links, vamos a poner los diferentes links. Vamos a poner un tag a, cuyo contenido diga Home. Y vamos a rutearlo, en vez de usar el href, en vez de usar el href, vamos a usar un modificador de Angular, que es routerLink. RouterLink es una directiva de nuestras vistas del módulo de routing. Igual a un atributo, a un valor, el valor de este atributo va a ser igual a una expresión de TypeScript. Aquà vamos a poner un array, en donde vamos a decir que vaya a /home directamente. Y luego vamos a poner otro que vaya a destino. [AUDIO_EN_BLANCO] Para mostrar la navegación. Entonces, vamos a nuestro whishlist. Sigue funcionando nuestra aplicación. Ahora vamos a destino y nos lleva al componente nuevo. Como no le codificamos nada en la vista, aparece, destino-detalle works! Más adelante vamos a empezar a comunicar todo esto. FÃjense que si yo ahora vuelvo a Home, perdà lo que estaba rendereado. ¿Esto es por qué? Porque no estamos haciendo manejo de estado. Ahora vamos a ir viendo diferentes temas, como inyección de dependencias y demás. Por ejemplo, redacts para hacer lo que es manejo de estado y poder compartir la información y que esa información no se nos pierda. Antes de terminar, podemos agregar un nuevo link en destino-viaje.component.html. Que es como realmente lo vamos a tener que usar. Ir al Ver Detalle de un destino que nos lleve a la página de destino de ese destino. Después vamos a ver cómo hacemos para que se vea exactamente ese destino que tenemos cargado. Entonces, ahora cargamos un destino. Nos aparece Ver Detalle. Lo vamos a elegir, aparece PREFERIDO, Ver Detalle. Y vamos al mismo. Si hacemos hacia atrás, fÃjense que no se recarga la página, sino que permanece todo sin el page up. De esta manera, ven cómo cambia aquÃ. Puedo navegar desde aquÃ, volver al Home. Ahora voy a ir a apretar hacia atrás. Ven cómo you estamos cumpliendo con lo que es una single-page application con más de una ruta. Bueno, espero que se haya entendido, que les haya gustado. Y hasta aquà llegó este video. Nos vemos en el siguiente video. [MÚSICA]
