Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular 2 práctico: Sitio de consumo de videos

Navegando entre componentes de Angular 2

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
La navegación de Angular nos permite cargar directamente componentes en el momento de utilizar una ruta. De esta forma podemos no solo usar los componentes como fragmentos de un documento web, sino como verdaderas páginas con contenidos individuales y encapsulados.
06:32

Transcripción

En esta lección, te voy a dar algunos trucos para utilizar mejor la navegación dentro de una aplicación de Angular 2. Acá, tengo una aplicación y tengo un componente con un encabezado donde tengo dos enlaces. Estos dos enlaces me están llevando a dos rutas distintas dentro de mi aplicación. Voy a hacer un pequeño cambio para que veamos una diferencia dentro de ambas rutas. Acá yo estoy definiendo estas rutas, estoy definiendo exactamente igual a las dos, y si notas la dirección que aparece ahí vamos a ver que en ambos casos estamos utilizando la propiedad "href". Voy a modificar el primer enlace y le voy a agregar un código, ya te voy a mostrar qué es, pero antes quiero que veamos el resultado inmediato que tiene este código. Entre ambos componentes vemos que tenemos el mismo resultado, pero eso es sólo la parte visible. Vamos a ver qué está sucediendo por detrás, voy a hacer clic derecho y vamos a presionar en el botón de "Inspeccionar". Acá nosotros vamos a poder ver todos los detalles que están ocurriendo tras bambalinas. Específicamente vamos a buscar la opción "Network". Vamos a ver que está sucediendo acá. En "network", me va a mostrar todos los archivos que se cargan cada vez que navegamos. Vamos a entrar al enlace donde se encuentra "Videoplay". En este caso es el enlace normal —vamos a hacer clic acá— y vamos a ver cómo hacemos una carga de 14 diferentes archivos. Eso está correcto, son todos los archivos relacionados con mi aplicación, imágenes, CSS, todo lo que está relacionado con ella y bueno, son 14 archivos. Ahora, si nosotros pasamos al segundo enlace, y quiero que recuerdes que este segundo enlace tiene el código que acabo de insertar —vamos a hacer clic— vamos a limpiar antes el registro de archivos cargados para que veas la diferencia, Y ahora sí, hago clic sobre "Lista de vídeos", quiero que notes que solo se han cargado tres. Volvemos otra vez a ver la diferencia. Limpio la lista de archivos cargados, vemos el enlace que usábamos antes: 14 versus 3 ¿Por qué está sucediendo esto? Lo que está pasando es que estamos usando un código para hacer una carga asincrónica de los archivos de Angular. Esto significa que únicamente estamos cargando el componente necesario y los archivos relacionados con este componente. Vamos a revisar cómo hice este código. Para poder habilitar estas conductas, simplemente tenemos que modificar ligeramente el enlace. Primero vamos a dejar de utilizar la propiedad "href". En este caso, voy a copiar acá la ruta para no olvidarla, y voy a borrar esta propiedad. Vamos a utilizar algunas directivas de Angular, por ejemplo, en vez de utilizar "href", vamos a utilizar la directiva "routerLink". Esto nos va a permitir apuntar cualquier ruta que se encuentre dentro de nuestra aplicación. ¿Cuáles son las rutas que se encuentran dentro de nuestra aplicación? Si buscamos dentro de nuestro módulo vamos a ver que acá están definidas las rutas, cualquiera de estas es válida y la podemos utilizar acá. Voy a definir la ruta que acabamos de utilizar, en este caso es "video-player", quiero que notes que estoy incluyendo acá un arreglo y una vez que tengamos eso también vamos a poder incluso enviar parámetros. ¿Qué son los parámetros? Los parámetros van a ser: Información o variables que vamos a enviar dentro del URL. Por ejemplo, en este caso, estamos definiendo la propiedad "queryParams" con "videoID" y estoy poniendo un número acá: 230. Vamos a guardar este código y vamos a analizar cuál es el tráfico que van a tener ambos enlaces. Vamos a ver cómo cambia. Voy a borrar la lista de archivos que se han cargado y vamos a ver "Video player" hasta hace unos minutos nos cargaba 14 archivos —hacemos clic acá— y ya no cargamos ninguno porque tiene todos los componentes necesarios. Volvemos a "Lista de vídeos" y esta nos carga tres porque estamos haciendo una petición a archivos que se encuentran externos. En este caso, de hecho, de sólo me cargo uno porque las dos imágenes quedaron almacenadas en la memoria caché del navegador. Vamos a volver al código y vamos a hacer un detalle adicional. Por ejemplo, cuando estamos trabajando dentro de una aplicación es posible que queramos que algunas secciones queden destacadas por ejemplo, un menú de navegación que nos muestre cuál es el enlace activo. Para eso, tenemos una directiva llamada "RouterLinkActive". Esto lo que va a generar es que inyectará una clase de CSS dentro de este elemento, en este caso, dentro del "a", en el momento en que se encuentre activo con esta ruta. Vamos a revisar y vemos que dentro de "Lista de videos," estamos en la ruta: "Lista de videos", y si hacemos una inspección del código, vamos a ver que acá se encuentra una clase llamada "active". Esta es la clase que se acaba de asignar gracias a que "routerlinkActive" va a generar esta clase. Vamos a cambiar de dirección para que veas cómo se elimina esa clase. Si volvemos a inspeccionar este elemento, vamos a ver que la clase "active" ya no se encuentra. ¿Cómo vamos a desplegar eso dentro de la aplicación? Muy sencillo, en este caso, voy a buscar el CSS del componente que sería por ahora "Header" y ya tengo una clase de CSS que se va a desplegar únicamente cuando tenga un enlace "a" que se encuentre con la clase "active". En este caso le pondré un fondo de color rojo. Revisemos el resultado final y vamos a ver que, por ejemplo, si estoy en "video player" todo se muestra exactamente igual, pero si entramos a "Lista de vídeos" se va a activar la clase "active" y vamos a saber cuál es el enlace que tenemos activo. Esto lo podemos asignar en cualquier parte de nuestra aplicación y vamos a saber cuál es la parte que está activa, haciendo más sencilla la navegación para el usuario y también utilizando estas propiedades vamos a hacer que nuestra aplicación no sólo sea más eficiente, sino que también utilice muchísimo menos ancho de banda.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

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.