[MUSIC]
En este ejercicio vamos a ver cómo podemos aprovechar el módulo de enrutamiento
de Angular para poder soportar múltiples componentes, y
poder navegar a cualquiera de esos componentes en nuestra aplicación Angular.
Echando un vistazo rápido al estado de nuestra solicitud.
Al final del último ejercicio,
ya notamos que en esta aplicación, en el encabezado,
tenemos enlaces a cuatro páginas diferentes de comillas, entre comillas aquí.
Ahora, en términos angulares, esto sería compatible con el uso de
diferentes componentes, como veremos en este ejercicio.
Así que aquí vemos que cuando hacemos clic en el Inicio,
queremos poder ver los detalles de lo que debería estar presente en la Página de Inicio.
Y de manera similar, la Acerca y el Menú, por supuesto, ya lo ves allí,
y luego el Contacto, probablemente muestra alguna información sobre el contenido de
este restaurante en particular.
Entonces, ¿cómo van a apoyar algo como esto?
Primero, al echarle un vistazo rápido vemos que el Menú es
ya soportado por mostrar la información sobre el menú aquí, y
esto ya está facilitado con el uso del componente Menú.
Así que vemos que el componente Menu está yuxtapuesto entre el encabezado y
el pie de página y es capaz de mostrar la información allí mismo.
Ahora, ¿cómo podemos aprovechar el uso del módulo Router Angular para permitir que
nos admita estos múltiples componentes y poder navegar entre ellos?
Ahora, para empezar, primero, por supuesto, necesitamos múltiples componentes,
cada uno de ellos mostrando su respectiva vista para que podamos navegar entre las vistas.
Así que vamos a añadir tres componentes más a nuestra aplicación Angular,
el Hogar, Acerca y el Contacto.
Ya sabes cómo hacerlo, así que vamos a ese paso a continuación.
En el símbolo del sistema, escriba ng g component
home para crear el componente home.
Del mismo modo generar
el componente sobre y
también mientras estamos en él
el componente de contacto.
Así que ahora tenemos tres componentes añadidos junto con el nuevo componente que ya tenemos
.
El componente de detalle del disco ya se está utilizando en los componentes del menú, por lo que
no lo consideramos por el momento.
Pero ahora tenemos componentes de hogar, sobre, contacto y menú, y
necesitamos una manera de ir entre ellos.
Entonces, ¿cómo vamos a hacer eso?
Así que ahí es donde hago uso del módulo de enrutador angular.
Para empezar a usar el módulo router que nos permita navegar
entre estos componentes, añadamos un nuevo módulo angular.
Ahora bien, este patrón de uso del módulo del router es algo que se sugiere para
aplicaciones angulares un poco más complejas, pero
si lo hacemos como práctica estándar, va un largo camino para ayudarnos en el futuro.
Así que estoy comenzando incluso la simple aplicación con
poniendo el módulo del enrutador en su propio módulo separado.
Así que abarca todas nuestras necesidades de enrutamiento en un módulo separado.
Para empezar, volvemos a utilizar la CLI angular para
crear otro módulo, y llamaremos a ese módulo como enrutamiento de aplicaciones.
Así que este módulo de enrutamiento de aplicaciones que vamos a crear va a aprovechar
el módulo de asignación angular para proporcionar características de enrutamiento para nuestra aplicación.
Y luego vamos a hacer uso de eso en nuestro módulo de aplicaciones para habilitar el enrutamiento.
Para crear un nuevo módulo llamado enrutamiento de aplicaciones,
en el prompt escriba ng g module app-routing,
y que debería crear un módulo de enrutamiento de aplicaciones y
poner un archivo app-routing.module.ts en esa carpeta particular allí.
Ahora este módulo de enrutamiento de aplicaciones se acaba de dejar allí.
Necesitamos incluirlo explícitamente en nuestro módulo de aplicación,
por lo que tiene que poder hacer uso de él.
Al ir al editor ahora vemos que ahora tenemos otra carpeta aquí
llamada app-routing y dentro de que tenemos un ApproutingModule aquí,
elegimos un módulo angular genérico que la CLI angular ha generado para nosotros.
Esto no tiene nada específico sobre el enrutamiento como tal en este momento,
, pero vamos a agregar esas características allí.
Pero, antes de hacer eso, vamos a utilizar este ApproutingModule en nuestra app.module,
el módulo raíz para nuestra aplicación Angular.
Para hacer eso, abra el app.module, y
mientras estamos aquí, déjame hacer un poco de limpieza aquí.
Tiendo a no gustarme el código desorganizado, así que
solo voy a mover todo este código para
los componentes juntos en un solo lugar allí y
luego tengo mis servicios que se requieren aquí abajo.
Ahora tenemos un nuevo módulo que estamos recibiendo
del ApproutingModule,
que acabamos de crear y
entonces voy a requerir que
ApproutingModule en mi,
módulo de ruta o el AppModule aquí.
Entonces, incluyo el ApproutingModule importándolo primero allí.
Y luego, después de eso, en las importaciones, entro y
luego agrego el ApproutingModule.
Justo ahí, ApproutingModule.
Entonces, con esto, mi módulo de aplicación,
el módulo raíz, ahora está arreglado para hacer uso del ApproutingModule.
Ahora esto me da la libertad de desarrollar mi parte de enrutamiento en
mi ApproutingModule con plena confianza de que será utilizado por mi módulo de aplicación.
Así que vamos a guardar los cambios en el módulo de la aplicación, y
luego vamos a volver y abrir el ApproutingModule aquí.
Y aquí vamos a hacer uso de
el módulo de router que Angular proporciona para nosotros.
Así que aquí déjame importar el,
routerModule aquí, y también el módulo de rutas
compañero que está disponible desde Angular.
Y luego voy a importar eso desde Angular,
y luego, RouterModule aquí.
Entonces, desde la biblioteca de enrutador angular, importo tanto el routerModule como
el módulo Routes.
Así que una vez que hago eso, obviamente, necesito poder incluir el routerModule aquí.
Así que además del CommonModule que he importado allí,
también necesito usar el routerModule aquí.
Ahora, voy a dejarlo en este punto.
Vamos a desarrollar las rutas para nuestra aplicación Angular y
luego volver y arreglar esto un poco más tarde.
Así que con esto, permítanme guardar los cambios en el módulo de enrutamiento de aplicaciones.
Y lo que voy a hacer es, solo por el bien de mantener mi código limpio y
organizado, voy a definir todas las rutas para mi aplicación en otro archivo.
Pero crearé en la carpeta app-routing y
luego lo nombraré como routes.ts5.
Ahora, dentro de este archivo, crearé todas las rutas que necesito.
Así que aquí, voy a importar,
Las rutas de, @angular /router,
y luego usar eso para construir las rutas para mi aplicación.
Ahora, además, necesito poder importar todos los componentes
que tengo dentro de mi aplicación.
Porque quiero poder navegar a todos los componentes.
Entonces, ¿dónde tengo la lista de todos los componentes?
Los tengo en el app_module.
Así que déjame ir al app_module.
Trato de no escribir cosas tan lejos como sea posible para mantener las cosas bajo control.
Así que iré al app_module, y luego copiaré todos los componentes que tengo.
No necesito AppComponent porque no voy a navegar directamente a eso en mi aplicación
, pero los restantes necesitaré.
Así que voy a simplemente copiar todos esos y
luego incluirlos en mi archivo de rutas, aquí.
Así que ahora tengo el MenuComponent, Dishdetail, Header, Foot.
En realidad, tampoco necesito el encabezado y FooterComponent.
No necesitaré el encabezado y
FooterComponent porque no voy a navegar a ellos usando rutas.
Así que permítanme eliminar el encabezado y los componentes del pie de página.
Sólo necesito el Menú, Inicio, Acerca de, Contactos.
incluí el Dishdetail, vamos a llegar a eso en uno de los ejercicios posteriores.
Así que ahora que hemos incluido todos estos, el siguiente paso es que
me defina las diversas rutas que están disponibles aquí.
Voy a definir una constante aquí
rutas con nombre del tipo Rutas.
Así que ahora ves por qué tengo rutas importantes desde el enrutador angular allí.
Así que esto me permitirá definir una matriz especificando
las diversas rutas que forman parte de mi aplicación.
Aquí, permítanme especificar todas las rutas aquí.
Ahora, cuando especifique rutas en su aplicación Angular
, especificará la ruta.
Que comenzaré con HomeComponent,
y luego cuando navegue a la ruta de inicio,
el componente correspondiente es HomeComponent.
Entonces, cuando mi URL incluya home,
, entonces estaré navegando hasta HomeComponent.
En la conferencia anterior, ya hemos visto cómo usamos el HTML
pushState () para reconocer la navegación
interna, usando el soporte HTML para pushState ().
Así que eso es lo que estoy aprovechando aquí para definir estas diversas rutas aquí.
Entonces, cuando digo localhost: 4200/home,
entonces eso apunta al HomeComponent, aquí.
Así que esa es la forma en que navegaré hasta HomeComponent.
Del mismo modo, podemos definir para los otros componentes de nuestra aplicación.
La siguiente ruta que voy a definir es al MenuComponent.
Para este ejercicio, voy a definir sólo estos dos.
Los restantes se rellenarán como parte
de algunos de los ejercicios y tareas posteriores que siguen.
Así que tenemos dos de ellos configurados, Inicio y Menú.
Ahora, también debería proporcionar la ruta predeterminada aquí.
Entonces, cuando el usuario navegue a localhost: 4200,
, entonces terminará en la ubicación predeterminada.
Entonces, en ese caso, simplemente redirigiré al usuario al HomeComponent,
que es lo que se mostrará en la aplicación Angular.
Entonces, para hacer eso, escribiré en la propiedad RedirectTo.
Y luego define que sea /home.
Lo que significa que cuando navega sin proporcionar una ruta URL allí,
entonces navegaría automáticamente al HomeComponent,
y esto debería coincidir completo aquí.
Así que estos tres, voy a suministrar para las rutas aquí, por el momento.
Los restantes,
como dije, serán añadidos como parte del resto de los ejercicios.
Ahora, obviamente ves estas líneas rojas
porque estas están todas en
../Así que déjame arreglarlas.
Así que ahora, desde el archivo routes.ts,
estamos preparando esta constante de Rutas aquí y
luego poniéndola a disposición.
Así que ahora que esto está listo para nosotros, volveremos a app-routing.module.
Y en el app-routing.module,
voy a importar la constante de rutas,
constantes de rutas.
Si quieres decir eso como rutas, rutas constantes, y úsalo aquí.
Ahora, ¿cómo lo hago aquí?
Ahora, el routerModule toma como
un parámetro para ForRoot,
El parámetro es la configuración de rutas.
Así que voy a suministrar las rutas como el parámetro para eso, el routerModule.
De acuerdo, así que arregla nuestra configuración de enrutamiento para nuestra aplicación.
Un cambio final que necesitamos corregir es que desde app-routing.module
queremos poder exportar el routerModule a nuestro app-module para
que también pueda hacer uso de él.
Así que aquí es donde hacemos uso de la propiedad export
en nuestro decorador ngModule.
Y haga que nuestro RouterModule esté disponible para AppModule.
Así que vamos a guardar los cambios también hasta ahora.
Ahora, al enrutar a una de estas partes,
sea lo que muestre la vista para el componente en particular.
No tenemos nada en este momento en nuestra solicitud.
Cuando miras el archivo AppComponent.html.
Aquí, por defecto solo tenemos el app-header, app-menu,
y el app-footer aquí.
Ahora afortunadamente,
el RuterModule Angular nos proporciona
con una directiva llamada como router-outlet.
Así que cada vez que especifique esta directiva como,
La etiqueta en su archivo de plantilla.
Entonces su aplicación Angular usará automáticamente
como el lugar donde se debe insertar la vista correspondiente.
Entonces, especificando la salida del enrutador en el archivo de plantilla de mi AppComponent.
Ahora podré mostrar cualquiera de esa información en esa ubicación en particular.
Así que hemos hecho cambios en el módulo de enrutamiento de aplicaciones,
el archivo AppComponent.html, donde hemos añadido el router-outlet.
Definimos las rutas en el archivo routes.ts y
luego tenemos el AppModule donde agregamos en el ApproutingModule
como una de las importaciones allí, después de importarlo aquí.
Así que después de todos estos cambios, vamos y
echemos un vistazo a lo que nuestras aplicaciones Angular están mostrando en el navegador.
Al ir a nuestro navegador, ahora podemos ver que en nuestro navegador
lo predeterminado que se ha mostrado aquí son las obras domésticas.
De su conocimiento de cómo funciona el componente generado por Angular CLI.
Ya reconoce que debe estar en la plantilla del componente principal.
Además, eche un vistazo a la URL en la parte de dirección del navegador.
Ves que dice localhost: 4200/home.
Si simplemente escribo localhost: 4200,
esto se redireccionará automáticamente a localhost: 4200/home.
Porque configuramos esa ruta en particular en nuestra configuración de rutas aquí.
Ahora no tenemos forma de ir a los módulos restantes, así que
¿cómo proporcionamos el enlace para que podamos navegar al módulo restante?
Así que para completar eso, tenemos que ir y poder agregar información
adicional en los archivos de plantilla de componentes de encabezado para
que pueda navegar entre estos diversos componentes.
Volviendo a nuestro editor, permítanme abrir el archivo HeaderComponent.html.
Dentro de este archivo HeaderComponent, vemos que tenemos estos botones
aquí arriba que deberían permitirnos navegar a esos componentes particulares allí.
Así que aquí, tomamos la ayuda de otra directiva de atributos que
el módulo de enrutamiento proporciona para nosotros llamada como routerLink.
Así que a estos vamos a suministrar
routerLink como/home.
Lo que significa que para este botón en particular,
el enlace de inicio en nuestra barra de herramientas.
Cuando hacemos clic en eso, eso debería dirigirme automáticamente a la casa.
Así que de esta manera, mi aplicación Angular sabe dónde enviarme en este punto.
Así que eso es para el hogar allí.
Ahora de manera similar, permítanme también agregar uno para el menú aquí.
Para el menú, cuando hago clic en el enlace de menú allí,
que debería llevarme al componente de menú.
Entonces, la directiva de atributos RouterLink me permite especificar, como ves
aquí una cadena donde puedo especificar la ruta que debe agregarse.
Guardemos estos cambios también, y luego echemos un vistazo final a nuestra aplicación.
Al ir a nuestra aplicación, ahora vemos que un componente Home se muestra aquí.
Cuando hacemos clic en el componente Menú, estamos en el menú.
Así que observe cómo mi aplicación navegó automáticamente a
el componente de menú para mostrar la vista con el menú aquí.
Y también echando un vistazo a la barra de direcciones,
observe cómo la barra de direcciones ahora muestra localhost: 4200/menu.
Una vez más, podemos navegar de vuelta al componente de inicio y al componente de menú,
de ida y vuelta.
Así que esto muestra cómo al agregar este enrutamiento a nuestra aplicación,
somos capaces de navegar y mostrar diferentes vistas dentro de nuestra aplicación.
Ahora, el sobre y el contacto, vamos a hacer eso como parte de
otro ejercicio y la tarea que sigue más adelante.
Esto completa este ejercicio donde hemos utilizado el módulo de router angular y
luego configurado nuestra aplicación angular para utilizar varias rutas
para mostrar las diferentes vistas.
Este es un buen momento para que
haga una confirmación de Git con el mensaje Fundamentos del enrutador angular.
[MÚSICA]