[MÚSICA] [MÚSICA] Hola a todos nuevamente. Aquà estamos para el tercer video y último de la lección número 1 del módulo 3. En este caso veremos cómo organizar una aplicación, los diferentes flujos de navegación cuando contamos, por ejemplo, con módulos y cómo hacer que ese ruteo, esas rutas de ese módulo sea independiente de nuestro módulo raÃz, pero a su vez también que pueda redirigir el flujo de navegación nuevamente al módulo principal. Esto nos sirve, por ejemplo, para descomponer una aplicación en diferentes módulos y poder trabajar de manera desacoplada, como puede ser, por ejemplo, el módulo de mis mensajes, mi whishlist, módulo de búsqueda si estuviésemos, por ejemplo, en módulo de red social, de ratings y comentarios y mis amigos, etcétera, si estuviésemos en una aplicación de turismo, como estamos haciendo en este caso. Entonces, pasamos a la hoja de ruta. Vamos a tener que crear un módulo. Vamos a llamarle reservas o módulo de reservas. Y le vamos a levantar uno de sus flats, indicando que se integra a la app, que es core al módulo app, core que tenemos en nuestra aplicación, y routing, que vamos a usar un ruteo especÃfico para este módulo. Hay módulos en donde tal vez uno solamente puede poner clases de TypeScript o JavaScript para programar lógica de negocio, no sé, un módulo para todo lo de Redux, un módulo para toda la comunicación con el servidor, pero hay veces que el código que necesitamos escribir tiene interfaz de usuario, pueden ser widgets, ese serÃa un caso, y en otro caso pueden ser componentes, páginas ruteables dentro de nuestra SPA, algo que afecte, que tenga que interactuar sà o sà con el router, que no es el caso de un widget, que tal vez es un componente como un mapa o algo asÃ, donde hay un selector de fecha de picker o, como decÃamos antes, código puro, comunicar con un servidor o lo que sea. En este caso queremos que tenga routing. Entonces, vamos al routing. Bien. Y a su vez, vamos a crear dos componentes dentro de reservas. Nosotros de esta manera, con esta sintaxis, you se va a dar cuenta que reserva se refiere al módulo que acabamos de crear que se llama reservas. Y luego, del listado también el detalle. Si vamos aquà al código, vamos a ver que en la aplicación, dentro de reservas tenemos reservas-detalle, reserva-listado. Y aquà tenemos el código del módulo. FÃjense por qué sé que se iba a dar cuenta que estamos adentro de un módulo. FÃjense dónde nos agregó reservas-listado y reservas-detalle.component. Adentro del module de reservas. En cambio, en app.module eso no está agregado, están las declarations del módulo reserva y no asà las declarations del módulo raÃz. Sin embargo, como le dijimos que, en la primer lÃnea de comando, aquÃ, le dijimos que se vinculaba a nuestro módulo nuevo, se vinculaba a la app, el que sà aparece en el módulo app.module es el reservas.module. Es decir, you está puesto como módulo hijo de nuestro módulo raÃz principal de la aplicación. Bien. Lo próximo que debemos ver es el reservas-listado.component.html. En el reservas-listado.component.html, vamos a hacer unos pequeños links sin un navbar, vamos a hacer links sueltos sin un router outlet. En este caso son links simplemente relativos a la ruta que estamos utilizando, a la ruta dentro de este módulo. E ir al login, que es fuera de este módulo. Es una ruta provista por el router outlet del módulo app.module. Entonces, por eso la sintaxis no tiene un punto adelante. Cuando le ponemos un punto adelante es relativo. Es igual que en los imports de TypeScript. Si le ponemos una barra adelante es raÃz. Lo próximo que haremos es ir a reservas-routing. Este archivo fue creado dinámicamente cuando le pusimos el flat de routing. Entonces, vamos a reemplazar el contenido por el siguiente. Vamos a decir que use un router.module que usa sus propias rutas, y sus propias rutas son reservas, que va al listado, y reservas/:id, que va al detalle. En el detalle.component no vamos a hacer lo mismo que you hicimos en el video anterior del id. Ustedes pueden realizarlo, nosotros vamos a simplemente que reservas/cualquier id rutee acá, pero no lo vamos a mostrar en el HTML del detalle para ahorrar tiempo. Bien. Y lo último que tenemos que hacer es chequear el reservas.module. El reservas.module nosotros you lo tenemos actualizado por cómo dimos de alta con los flats el módulo. Básicamente, al ponerle al flat de ruteo, nos creó esta vinculación con reservas.routing. Entonces, vamos a probar la aplicación. Vamos a home. Todo okey. Vamos a reservas. Reservas-listado work. Ir al detalle, fÃjense que nos lleva a reservas, debajo, aquÃ, nos lleva a reservas/10. No estamos mostrando el diez, como dijimos, no estamos mostrando el id. Pero funcionarÃa igual usando la misma técnica de suscribe que hicimos anteriormente. E Ir al login. FÃjense que, aquà debajo, que nos manda la barra de login fuera del módulo. Eso es porque no pusimos una ruta relativa, dentro de /reservas serÃa eso. Como es en este caso. FÃjense que acá es ruta relativa, donde estoy parado, que es /reservas y acá no estoy poniendo /reservas. Y le parametrizo directamente con el diez. Entonces, como yo you estoy en reservas, lo que escribo como ./10 se me resuelve a reservas/10. Es relativa a donde estoy parado, igual que en un false system. Y /login nos lleva al login de la aplicación. Muy bien. De esta manera concluimos este video y esta lección, habiendo podido de esta manera organizar nuestro módulo, nuestra aplicación, perdón, de manera modular, como vemos en este video, utilizar wards, por ejemplo, para casos de usos de login o casos de usos varios de acuerdo, por ejemplo, a permisos del usuario, mostrar una funcionalidad, una ruta, otra ruta sà y otra ruta no, etcétera. Y de esta manera, también hemos visto organizar rutas de forma modular con rutas hijas, children routes. Asà que de esta manera concluimos esta primer lección, nos vemos en el siguiente video. [MÚSICA]
