Angular esencial

Navegación interna en una aplicación Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a examinar las diferencias entre utilizar un enlace regular y el sistema de navegación interna de Angular y cómo esto afecta el rendimiento, al ancho de banda y a la funcionalidad de una aplicación.
07:27

Transcripción

Hablemos sobre navegación dentro de una aplicación Angular. Acá yo tengo una aplicación que ya tiene definidas varias rutas y le he insertado un menú de navegación. En este caso tengo tres diferentes secciones, las cuales por ahora no están activas, pero deberían conducirme a tres diferentes secciones de mi aplicación. Vamos a revisar cómo está funcionando mi aplicación y vemos que dentro del módulo principal, en este caso'app. model. ts' tengo definidas tres diferentes rutas. También tengo definidas la ruta por defecto y una ruta para desplegar en caso de que exista algún error. Yo estoy desplegando el contenido que se está mostrando al inicio de mi aplicación dentro de un componente estático. Vamos a revisar dónde se está mostrando esta barra de navegación que es específicamente dentro de un componente llamado'encabezado. component. html'. En este caso he insertado una barra de navegación y tengo los tres enlaces que se están desplegando en pantalla. Sabiendo que tengo estos tres enlaces, voy a copiar una las rutas, en este caso'lista- libros' y vamos a asignarla dentro de la aplicación. De hecho, también vamos a poner el inicio y vamos a poner el'acerca-de'. Vamos a dejar toda la navegación definida dentro de la barra de navegación. Vamos a examinar el resultado y vemos que tenemos la barra de navegación exactamente igual. Y al hacer clic sobre cualquiera de estos elementos, me va a cargar la ruta que yo tengo configurada en mi aplicación y, en teoría, todo está funcionando correctamente. Esto es una navegación pálida, pero hay un detalle. Vamos a examinar un poco más en profundidad qué es lo que está ocurriendo acá. Yo voy a hacer clic derecho sobre mi navegador, en este caso Chrome, y voy a buscar la opción Inspect o Inspeccionar, dependiendo del lenguaje del navegador en el que estés trabajando. Voy a buscar específicamente una cejilla llamada Network y ahora examinemos un poco cómo está funcionando esta aplicación. Tenemos a'inicio' y vemos que se están cargando todos los archivos de esta aplicación. Si paso a'lista-libros', vamos a ver que se vuelven a cargar los mismos archivos. En'acerca-de' vemos como todo vuelve a cargarse. En este caso, yo lo que estoy haciendo es que estoy cargando desde cero mi aplicación. Mi aplicación, una vez que entra, lee la ruta y despliega los contenidos. Sí bien es cierto esto es posible y es técnicamente válido, no es la mejor idea, porque no estamos aprovechando al máximo Angular. Una las ventajas que nos ofrece Angular es que podemos hacer una navegación utilizando capacidades asincrónicas, o sea, simplemente cargando el componente y el contenido del mismo dentro de nuestra aplicación, lo que significa que vamos a tener mucho menos transporte de datos. En este caso, por cada vez que hagamos clic estoy cargando más de 2 MB de información. Vamos a modificar esto para que trabajemos correctamente con el'router'de Angular y que utilicemos la navegación asincrónica. Voy a ir a mi código y en vez de utilizar el'href' voy a utilizar otra propiedad. Vamos a borrar este'href'. Simplemente voy a copiar la ruta, porque la ruta sí me va a servir, y voy a borrar el'href'. En este caso lo que voy a insertar va a ser paréntesis cuadrados y voy a incluir una directiva llamada'router- Link'. 'router-Link'me va a permitir a mí definir una ruta y en este caso vamos a definir que el valor sea y lo ponemos entre comillas. Vamos a poner acá esto también dentro de paréntesis cuadrados y ponemos acá comillas simples, porque vamos a insertar un valor de texto, y definimos la ruta. Voy a guardar y vamos a examinar una vez más nuestra aplicación. Este simple cambio acaba de hacer un efecto muy importante en la aplicación. Tenemos que Lista de libros está cargando la navegación de forma asincrónica, así que vamos a ver. Tenemos acá nuestra aplicación. Vemos que se acaban de cargar todos los archivos. Voy a purgar esta lista y vamos a ver cuáles datos se van a cargar cuando yo entre a Lista de libros. Vemos que en este punto no se está cargando nada, porque no estamos llamando ni siquiera datos externos, así que no hay ninguna carga, ninguna llamada de HTTP. Veamos lo que pasa con el segundo enlace que está trabajando con una carga completa. Si vemos, acá nos va a mostrar todos los archivos que se van a cargar y vemos que se cargaron 2. 9 MB, mientras que así –limpiamos acá– si llamamos Lista de libros no hay ninguna carga externa. Esta es una de las ventajas enormes que nos ofrece la navegación utilizando el parámetro'router-Link'. Ahora veamos otro detalle. Cuando nosotros estamos trabajando en elementos de navegación, es muy común que deseemos que dentro de los ítems de navegación se nos marque cuando está activo o cuando estamos viendo específicamente una sección. Esto lo podemos hacer muy fácil con una directiva llamada 'router- Link Active'. En este caso vamos a definir que cuando este enlace se encuentre activo, asigne una clase. Yo ya dentro de mi CSS tengo una clase llamada'active' que va a mostrar el elemento de navegación que se encuentre activo con un fondo de color gris. Así que vamos a guardar y vamos a ver cómo está funcionando nuestra aplicación. Y vemos que acá ya tenemos los tres enlaces. Si entramos a inicio, que no tiene definido la capacidad'active', vemos que no me está mostrando ningún cambio en particular. Entramos Acerca de, tampoco me muestra ningún cambio. Y si pasamos a Lista de libros, vemos que ahora sí se está desplegando acá la clase'active'. Vamos a examinar en este espacio, vamos a ver acá el enlace y vemos que dentro de este enlace, el cual se está marcando –como puedes puedes acá– estoy inspeccionando los elementos. Y vemos que tenemos definido acá una clase'active', en el cual yo ya tengo algunos elementos previamente definidos para que se muestre de color gris. Si pasamos a cualquier otra, vemos que al no tener la propiedad 'routerLinkActive', no me está mostrando la información. Y así es como nosotros podemos generar la navegación dentro de Angular. No solo podemos ahorrar muchísimo ancho de banda y hacer nuestra aplicación muchísimo más eficiente, aprovechar al máximo las capacidades de Angular, trabajando el sistema de enrutado propio de Angular, sino que también podemos hacer de una forma muy rápida que los elementos nos muestren cuándo estamos dentro de una sección con solo agregar una directiva adicional, en este caso 'routerLinkActive'.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.