El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 práctico: Sitio de consumo de videos

Navegación básica en Angular 2

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a utilizar los componentes de router y los aplicaremos dentro de nuestra aplicación. Aprenderemos cómo definir una ruta y cómo entrar en un documento creado por ellas para trabajar la indexación de nuestras aplicaciones.
04:45

Transcripción

Vamos a aprender cómo navegar entre componentes dentro de una aplicación de Angular 2. Acá tengo una aplicación con varios componentes instalados, tengo un componente que está generando este encabezado y otro componente que se está conectando a un servicio de "PHP" para mostrar esta información. Vamos a hacer que esta aplicación pueda navegar dentro de diferentes pantallas. Vamos a ir al código de mi aplicación, en este caso, estoy utilizando la terminal que se encuentra integrada en Visual Studio; y estoy trabajando con un servidor para mostrar los contenidos. Voy a agregar una nueva ventana de la terminal, presionando acá el botón de "+". Esto va a abrir una ventana adicional para poder trabajar en paralelo sin tener que cerrar mi servidor. Ahora, en este caso estoy en una carpeta llamada: "HTDOCS". Para entrar a mi proyecto debo ir a donde se encuentra la carpeta llamada "angular", y, dentro de ella, tengo otra carpeta que se llama "sitio-videos" que es donde está mi proyecto. Ahora, acá, voy a generar un nuevo componente, utilizando el comando "ng g component". En este caso, el componente se va a llamar "video-player". El sistema acaba de generar un nuevo componente y lo voy a agregar dentro de las rutas de navegación. Para eso, voy a entrar dentro de "app module", y vamos a ver que acá ya se ha incluido este nuevo componente, y lo voy a registrar como una nueva ruta. Para eso simplemente voy a copiar esta línea, donde ya tengo una ruta definida, y voy a modificar los parámetros para que se cree una nueva ruta que se va a llamar, en este caso, "video-player", y esto cargará el componente llamado "VideoPlayerComponent". Listo, ya tenemos habilitada la ruta. ¿Cómo vamos a hacer la navegación? Para eso, voy a utilizar el componente predefinido, que ya tengo, llamado "header"; y voy a buscar la plantilla de este componente llamado "header.component.html". Acá vamos a agregar los elementos de navegación. Ya tengo un código listo para acelerar un poco el proceso, donde tengo básicamente una lista y tengo dos enlaces, uno que dice "Lista de Videos" y el otro dice "Video Player". Vamos a guardar, y aprovechando que tengo mi servidor funcionado en un segundo plano, vamos a buscarlo, en este caso está en la primera ventana. Aquí está. Listo, tengo mi servidor funcionando todo se ha compilado automáticamente y ya está listo para verse. Vamos a revisar, y tenemos acá dos enlaces, uno que dice "Lista de videos" y otro que dice "Video player". Vamos a hacer clic sobre "Video player", y, por ahora, en ambos casos estamos enviando a una dirección que, en este caso, la dirección es el signo de numeral, y estamos apuntando hacia una ruta que está indefinida; vamos a modificarla. Entonces, volvemos al código, vemos que tenemos acá este signo que en algunos países llaman numeral, gato o michi, almohadilla. Vamos a ver cómo modificamos esta dirección, sencillo. Vamos a buscar las direcciones, en este caso, tenemos acá "Lista de video", que esta es una de las rutas que tenemos registradas, así que en el enlace que dice "Lista de video", podemos poner simplemente la ruta "Lista-video", y también podemos poner la ruta "Video-player". Listo, ya tenemos las rutas definidas. Volvemos a nuestra página. Vamos a ver que acá estamos cargando "Lista de video", y si entramos acá, a "Video player", vamos a ver los contenidos que en este momento tiene nuestro componente, básicamente, "video player works" que es el contenido que se incluye por defecto. Si revisamos en la plantilla de este componente, vamos a ver que acá está la información. Vamos a poner "Funciona". Vemos que el resultado ya se despliega, y tenemos la navegación de nuestra aplicación ya disponible.

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.