[MUSIC]
Empecemos ahora a hablar de Ruteo Angular.
¿Está enrutando o está enraizando?
Voy a estar enraizando para el enrutamiento.
Así que de ahora en adelante, pronunciaré todos estos como enrutamiento, rutas
, enrutador y así sucesivamente.
Si eres de un área donde en inglés lo pronuncias como ruta o
router, por favor ten conmigo.
Entonces, ¿qué es exactamente el enrutamiento angular y cómo nos ayuda?
En términos de la aplicación Angular que hemos visto hasta ahora
, nunca hemos visto el uso para el enrutamiento.
Hemos visto que podemos desarrollar una aplicación angular con
múltiples componentes y luego hacer uso de ellos uno dentro del otro, y
desarrollar una aplicación angular completa sin siquiera hablar de enrutamiento.
Ahora supongamos que tiene múltiples componentes y
desea poder navegar entre los componentes en
de una manera que puede causar esta navegación a través de, por ejemplo
, haciendo clic en enlaces o botones en su interfaz de usuario y
ser capaz de renderizar diferentes vistas en la pantalla de su aplicación,
entonces El enrutamiento angular viene a su rescate.
Veremos cómo podemos usar el enrutamiento para desarrollar algo llamado aplicaciones de página
única.
Hablaremos de aplicaciones de una sola página en la siguiente lección.
Pero por el momento, vamos a concentrarnos en Angular Routing y
específicamente en la Ruta un módulo que está disponible en Angular.
El módulo de router en sí está separado del módulo de núcleo angular, por lo que
está disponible como un módulo separado y tendrá que importarlo explícitamente
en su aplicación Angular para hacer uso del modelo de router angular
compatible que le proporciona para navegar entre el radio
de los componentes de radio que forman parte de su depredación angular.
Así que como parte del ejercicio, añadiremos múltiples componentes y
veremos cómo podemos navegar entre ellos usando el router angular.
Así que como ya mencioné, el enrutador angular
permite la navegación entre varias vistas.
De tal manera que puede incluir esta navegación en
los enlaces o los botones basados en la barra de herramientas y
así sucesivamente que puede incluir en la interfaz de usuario de su aplicación Angular y
entonces puede activar la navegación de una vista a otra
haciendo clic en el enlace o en el botón de su interfaz de usuario.
Aquí es donde el Router Angular aprovecha la URL del navegador y
usa la URL del navegador como una instrucción para
para navegar entre las vistas generadas por el cliente de radio.
Estas vistas son generalmente compatibles con los múltiples componentes
que forman duro de su aplicación Angular.
Ahora, cuando navega de una vista a otra,
también puede pasar parámetros opcionales a esas vistas.
Como aprendimos en esa diapositiva anterior,
el Router Angular aprovecha la URL para
permitirle reconocer la necesidad de navegar entre el medio.
Entonces, ¿aquí es donde Angular Router aprovecha lo que
ya es compatible con HTML5 a través de la API de historial?
Entonces, ¿qué nos permite hacer la API de historial?
Da a los desarrolladores la posibilidad de modificar
la URL de un sitio web sin causar una actualización de página.
Ahora bien, si estás acostumbrado a visitar varios sitios web en tu navegador,
normalmente harías clic en la barra de marcadores o
en un enlace en una página o escribirías explícitamente
la URL en la barra de direcciones de tu navegador.
Ahora, cuando haces eso, estás especificando explícitamente la URL allí.
Ahora, cuando especifica una URL,
está activando su navegador para ir automáticamente a un servidor y
buscar esa nueva página y renderizar la página en la ventana del navegador.
Ahora si puede suprimir esta necesidad de ir a un servidor y buscar información, pero
en lugar de cambiar la URL sin causar esta actualización de la página,
entonces podemos aprovechar eso para permitirnos navegar
entre vistas que forman parte de una sola aplicación y
aquí es donde tomamos ventaja de HTML5.
History API que admite métodos como PushState y ReplaceState.
Por lo tanto, PushState le permite agregar una entrada de historial en el historial de su navegador
sin causar realmente una actualización de página.
Del mismo modo, un ReplaceState modificará
la entrada de historial existente en el historial de su navegador.
Por lo tanto, incluso puede usar el botón Atrás y
hacia adelante de su navegador para poder moverse hacia atrás y hacia atrás
hacia adelante entre las URL sin causar una actualización de página.
Ahora, aquí es donde necesita especificar algo dentro de su página HTML
de índice llamado la base.
Entonces, cuando la API de historial HTML hace uso de estos métodos,
, entonces para la modificación, debe especificar una base
ubicación desde la que está especificando las partes adicionales
de su ruta URL que no dará lugar a una actualización de página.
Así que en este caso, para nuestra aplicación Angular,
esto siempre comienza en la raíz.
Entonces, es por eso que especificamos la base como href=»/».
Todo lo demás que viene después de eso en la URL será
tratado dentro de su aplicación Angular como algo que
desencadena la navegación que se maneja el enrutador Angular en sí
sin causar que su navegador necesite una actualización de un servidor.
Entonces, así es como el enrutador angular aprovecha la API de historial HTML5.
Ahora, si no tienes la API de historial,
la otra forma de hacer la navegación es usando hashtags.
Ya sabes que en HTML, si especificas algún enlace a partir de
con un hashtag, que se refiere a un enlace dentro de la misma página.
Así que cuando haga clic en tales enlaces, no causará una actualización de página.
En su lugar, te redirigirá a otra ubicación dentro de la misma página.
Entonces, esa es otra forma de hacer las cosas.
Pero para una representación limpia, la API HTML5 admite esta API de historial
que le permite manipular el historial de
su navegador sin causar una actualización de página.
Después de esa larga explicación,
tomemos un ejemplo para ayudarnos a entender esto aún más.
Supongamos que define su URL como esta, por ejemplo, ejemplo.abc.com/home.
Ahora con la API de historial HTML5,
simplemente puede tomar esa última parte de la URL y
modificarla a otra URL como la que había mostrado aquí con example.abc.com/menu.
Así que ve que la URL ahora ha sido cambiada de barra de inicio al menú de barra diagonal,
este cambio se puede activar usando un método de estado de inserción de la API de historial HTML5
sin como mencioné, sin recargar la página.
En su lugar, este será un disparador interno para la navegación
que el Router Angular aprovecha explícitamente para
apoyar la navegación entre varias vistas de su aplicación Angular.
Ahora obviamente usted debe estar interesado en cómo el Router Angular aprovecha
de esto.
Así que aquí es donde el Router Angular aprovecha la manipulación del historial
para modificar la URL del navegador sin activar una actualización de página.
Tomemos un ejemplo.
Supongamos que tiene su aplicación Angular residiendo en esta URL en particular.
Ahora, sucede que la aplicación Angular en la que está trabajando
se está procesando al navegador accediendo a ella en esta URL en particular.
Por lo tanto, nos ayudará a entender rápidamente lo que el Router Angular nos permite hacer.
Así que en este caso, cuando escribes esto en la URL de tu navegador,
tu Angular Router puede configurarse fácilmente para redirigirte
a una ubicación predeterminada dentro de tu aplicación angular.
Normalmente, recuérdame que algo como en casa.
Así que eso te llevará al punto de entrada predeterminado para
tu aplicación angular que por
para una fácil comprensión, la etiquetaré como /home.
Así que si tu URL contiene localhost: 4200/home,
significa que estás en tu ubicación de inicio predeterminada.
Ahora, cuando se activa esta navegación,
puede dejar que su Router Angular te lleve automáticamente a la vista,
por ejemplo, que es compatible con ese componente doméstico.
Así que cuando la URL se convierta en localhost:4200/home,
representará automáticamente la vista del componente home en la pantalla del navegador.
Muy exactamente cuando coloque la vista que veremos en la siguiente diapositiva y
en el siguiente ejercicio.
Del mismo modo, puede tener otras vistas dentro de su aplicación Angular
que también pueden ser compatibles con otras URL
que son extensiones del host local: 4200.
Entonces, por ejemplo, si la URL es localhost: 4200/aboutus, entonces
podría llevarle a que se le muestre la vista que representa AboutComponent.
Y de manera similar, el menú le mostrará el MenuComponent y así sucesivamente.
Así que lo que esto nos permite hacer es,
dependiendo de la URL que se use en su navegador
usará eso para navegar automáticamente entre las diversas vistas
de sus diversos componentes de su aplicación Angular.
Ahora, no tienes que preocuparte explícitamente por ello.
Si configura el Router Angular para que se encargue de todo esto, entonces el Router
se encargará automáticamente de proporcionarle la navegación entre estos componentes
como veríamos en el ejercicio que sigue a esta conferencia en particular.
Ahora antes de proceder al ejercicio donde vamos a aprender más sobre
el router angular, permítanme llamar rápidamente su atención sobre unos pocos términos
dentro del Router Angular que se encontrará durante el ejercicio y
Me gustaría que prestaras especial atención a estos términos,
porque son cruciales para entender cómo funciona realmente el Router Angular.
Así que primero verán que cuando diseñemos el Router Angular,
tomaremos esa ayuda del módulo de Router que
forma parte de la biblioteca de Router de Barra Angular.
Por lo tanto, vamos a importar el módulo router en o la aplicación angular
en el módulo de aplicación y luego también vamos a importar las rutas.
Así pues, las rutas nos permiten definir las distintas rutas que nuestra aplicación angular
hace uso o de las que hace uso el Router Angular.
Así que en ese caso, estaríamos especificando las rutas en forma de ruta y
el componente correspondiente.
Así que como vio en la diapositiva anterior, vio que cada una de esas extensiones de URL
se estaba asignando a la vista de un componente particular.
Entonces, ese tipo de información se suministra a ese Router Angular
a través de rutas y estas rutas se especifican usando
un objeto JavaScript como esta ruta con dos propiedades.
Ruta y componente y algunas propiedades adicionales que no vamos a encontrar
en este momento, pero vamos a ver en algunos de los ejercicios posteriores.
Además, la segunda pregunta que se preguntaría es ¿dónde se representaría esta vista
en su aplicación Angular?
Aquí es donde dentro de nuestra plantilla de nuestro componente de aplicación,
vamos a incluir una directiva llamada como el routerOutlet que se especifica como
ver como y .
Esto se incluirá en el archivo de plantilla de componente de la aplicación,
ahora entonces su enrutador angular navega a
las diferentes vistas de los diferentes componentes.
La vista correspondiente del componente se incluirá en la vista de aplicaciones
donde especifique esta salida del router en particular.
Así que, cuidado con eso en el ejercicio que sigue.
Además, para activar la navegación, verá que
con muchas de las etiquetas a que se utilizan dentro de la aplicación.
Así que, por ejemplo, incluiría una configuración de una etiqueta con el botón MD
componente de material angular en la barra de herramientas,
en el componente de encabezado de nuestra aplicación angular.
Asociaría las etiquetas a con otra directiva,
una directiva de atributo llamada routerLink.
El RouterLink es una directiva real que el módulo del router proporciona para nosotros.
Este enlace de router nos permite especificar la ruta como, por ejemplo,
códigos escritos, puedo ver un «/menu».
Puede tener más detalles que esto para el routerLink.
Pero para el ejercicio, vamos a empezar con un ejemplo simple donde tendríamos,
por ejemplo, /menu slash home slash póngase en contacto con nosotros y así
en especificado usando el atributo routerLink direct.
Así que cuando haga clic en un enlace como este en su barra de herramientas,
entonces eso activará el Router Angular para causar un cambio o
una navegación a una vista particular que es compatible con el módulo Angular Router.
Así pues, el mapeo entre este enlace y los componentes correspondientes
ya está especificado en la ruta que damos a nuestra aplicación Angular.
Así que, cuidado con todas estas cosas mientras haces el ejercicio.
Explicaré algunas de estas cosas y la razón por la que
las hace mientras estamos haciendo los pasos del ejercicio que sigue esta lección.
[MÚSICA]