Hola a todos, nuevamente. En el segundo video de la primer lección del módulo 3, el tema que veremos a continuación es cómo organizar rutas de forma modular dentro de nuestra aplicación. Es decir, tener rutas anidadas. Para eso, vamos a crear un nuevo conjunto de componentes. Tenemos la hoja de ruta. Vamos a crear unos componentes de vuelos dentro de "components vuelos" y dentro de ellos todos los demás componentes, "vuelos-component", "main-component", "mas-info" y "detalle". La idea es que el "detalle", vamos a mostrar un "Id" de vuelo solamente, o sea, literalmente un número de "Id" que nos va a venir en la ruta, en la Url nos van a poner un "Id" de vuelo, un identificador de vuelo, y lo vamos a mostrar directamente asà en la pantalla, en el HTML, en el principal, en el "vuelos component" vamos a mostrar un menú. Primero vamos a crear los componentes. Creamos el primero, ahora creamos el segundo. Luego vamos a crear el tercero, "vuelos-mas-info". Luego vamos a crear el cuarto y último, "vuelos-detalle". Una vez que los tenemos creados, vamos a solamente personalizar "vuelos-component", su HTML. Vamos a personalizar el HTML para poner una barra de navegación con "routerLinks". FÃjense que los "routerLinks" son relativos, es decir, nosotros vamos a tener una URL que nos va a dirigir a este componente raÃz de esta subruta, de esta ruta anidada, y este va a ser, dentro de la ruta que definamos para el "vuelos-component", adentro vamos a tener "/main", "/mas-info" y "/" Id de detalle. Por eso es que tenemos otro "router outlet" aquà adentro. Es decir, este "vuelos-component" se va a renderear, se va a dibujar, adentro del componente principal que ya tenemos otro "router outlet". Entonces, cabe entender que dentro de este componente, estas rutas relativas van a ser referencia o, mejor dicho, van a ser cargadas dentro de este "router outlet", que está dentro del otro, del principal, de la aplicación. Eso lo vamos a ver más fácil con el ejemplo. Vamos a proseguir personalizando las vistas. Vamos a ir a "vuelos-detalle-component", html. En "vuelos-detalle-component", como ven, vamos a mostrar el "Id", directamente, y en el typescript, en la clase, vamos a recibir el objeto "activatedRoute", que nos referencia a la información relativa a la ruta que actualmente está cargada en la URL al momento en que se está iniciando, cargando, este componente. Entonces, de la ruta actual que figura nos vamos a suscribir a los "params", a los parámetros, y vamos a sacar el parámetro "Id". Entonces, este "params Id", ¿de dónde sale? Eso sale de la configuración de la ruta. Para eso vamos a ver el último eslabón, que es el eslabón de la "app.module". En el "app.module", donde configuramos las rutas, vamos a agregar un nuevo objeto, que van a ser las rutas hijas de vuelos. Como se ve, es una ruta adicional, un conjunto de rutas adicionales, que tiene la misma estructura que la otra ruta, pero esta ruta principal, este conjunto de rutas, es la que se carga como "rutas raÃz" para el módulo de ruteo. Entonces, de alguna manera, este módulo de ruteo raÃz de Angular, que carga el conjunto de rutas principales en este objeto con el cual ya contábamos, de alguna manera tenemos que hacer que estas rutas raÃces conozcan a las rutas hijas. Para eso, en "routes" vamos a agregar un elemento nuevo, que va a ser la ruta "vuelos. Cuando entremos a "vuelos" el componente que se va a cargar es "vuelos- component". Acá puedo acceder solamente si estoy logueado y, a su vez, estoy diciendo que, aunque por defecto se cargue este componente, va a tener rutas hijas, es decir, que voy a poder hacer "/vuelos" entro aquÃ, y "/vuelos/home" entro aquÃ, "/vuelos/destino" y una cadena de texto que venga a continuación del "destino/", vengo a este componente. Y aquà es que vemos que tenemos este ":Id", en este "destino detalle component". Aquà vemos que es donde coincide con este "Id" que estamos invocando en "paramMap". Este ":" es el que Angular reconoce como "token", como carácter, para identificar que estamos indicando una parametrización por URL. Tenemos aquà unos errores. Sin querer agregamos un "component component" adicional. Sin querer, al crear los componentes en la lÃnea de comando, cometà un error y le puse un "component" de más al final, por eso me quedó un sufijo de "component" adicional. Ahà la aplicación compila correctamente. Nosotros, lo que tenemos que hacer para probar es, primero, ir al "Login" y ver si estamos logueados. No estamos logueados. Entonces ingresamos "user", "password" y nos logueamos. Una vez que estamos logueados vamos a poder ingresar a "vuelos". Cuando ingresamos a "vuelos", vemos el "vuelos component" inicial que cargamos, que mostró una navbar. Aquà tenemos para ir a subpáginas. Por ejemplo, "main" es donde estamos; "Más info" es un adicional de más información que no muestra mayor información que la que viene por defecto en los componentes, pero sirve para ver que esto está dentro del "vuelos contenedor". El contenedor, cuando vamos a "/vuelos", nos muestra todo esto que está aquÃ, la navbar, el "vuelo works" y el "router outlet". Este es nuestro "router outlet" y dentro, cuando vamos a "vuelos main", nos muestra este contenido. Si vamos a "Más info" nos muestra este contenido y si vamos a "Vuelo 5", que estamos parametrizando con un "Id" aquÃ, nos muestra, aquà en el "router outlet", el "detalle component", que levanta en typescript el "Id", lo vincula a su variable, como ya vimos en typescript, y lo muestra en la vista aquÃ. Entonces, aquà si hago "clic" en "Vuelo 5", pero yo bien podrÃa querer venir y cambiar acá y poner un "string" adicional, cualquier otra cosa, "Hola", por ejemplo, y eso es levantado por la variable de "ruta". Hasta aquà ha sido el tutorial de organizar rutas de fórmula modular. Nos vemos en el siguiente video.
