Angular 2 práctico: Sitio de consumo de videos

Instalar Angular 2 CLI

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Crear un proyecto de Angular 2 manualmente puede ser complicado y consumir mucho tiempo por la necesidad de instalar librerías externas, ajustar los archivos en el lugar correcto y enlazar todas las partes. Las herramientas de consola de Angular facilitan notablemente el proceso, y en esta lección vamos a aprender a instalarlas y utilizarlas.
06:11

Transcripción

Para trabajar en un proyecto de Angular, tenemos muchas formas distintas de hacerlo. Podemos hacerlo manualmente o a través de algún programa que nos ayude a generar las bases de nuestro proyecto. Durante este curso, vamos a utilizar específicamente el programa llamado "Angular CLI", o "Angular desde la línea de comandos". Como su nombre lo dice, lo que nos va a permitir a nosotros, es trabajar todos nuestros proyectos desde la línea de comandos o terminal. Acá yo tengo abierto Visual Studio Code que también tiene una terminal integrada, y vamos a instalar "Angular CLI" por sus siglas en inglés de la línea de comandos. Para instalarlo, voy a llamar el comando "npm install -g" para hacer una instalación global y voy a llamar el nombre del paquete, que se va a llamar "angular-cli". Esto va a instalar el programa que me va a permitir a mí, trabajar todos los comando básicos de Angular a través de la línea de comandos. Después de unos minutos, vamos a tener instalado el Angular CLI y estamos listos para poder trabajar dentro de nuestro ordenador. Voy a incluir el comando "clear" para que podamos leer mejor los elementos de la terminal, y para comenzar un nuevo proyecto en Angular yo voy a utilizar el comando "ng", que ya debería estar instalado y funcional dentro de mi equipo. Voy a presionar "Enter" y acá podemos ver que ya está funcionando. Sin embargo, me aparece un error porque no le he dado las instrucciones correctas. Vamos a poner, entonces ahora, el texto completo, que sería "ng". Así vamos a llamar a la consola de Angular y le vamos a dar un comando que va a ser "new", que me genere un nuevo proyecto. Vamos a definir el nombre de este nuevo proyecto, por ejemplo, "prueba", y vamos a presionar "Enter". Esto va a descargar todos los paquetes y todos los archivos necesarios para que podamos trabajar nuestra aplicación. Después de descargados todos los elementos para poder trabajar con Angular, vamos a ver que la línea de comandos ha generado una carpeta que se llama "prueba", y si la abrimos, vamos a ver que se encuentra una aplicación y que de hecho ya ha descargado todas las librerías y todos los elementos que vamos a necesitar para generar, no solo la aplicación, sino también para administrar la infraestructura del código que vamos a trabajar, incluso para realizar las pruebas de control de calidad. Vamos a probar nuestra nueva aplicación, y para entrar a ella, vamos a poner el comando "cd" para entrar a la carpeta en la que se encuentra nuestro proyecto, en este caso llamado "prueba". Presionamos "Enter". Y ya nos encontramos dentro del proyecto. Vemos que ahora tenemos acceso a los archivos que se encuentran acá. Ahora, para poder ver cómo funciona nuestra aplicación, podemos generar un mini servidor que nos va a permitir hacer las pruebas y revisar cómo va funcionando nuestro código. Para eso, vamos a insertar el comando "ng serve", que nos va a crear el servidor, y lo que va a hacer nuestra línea de comandos es que va a compilar todos los archivos en TypeScript, va a incluir todas las librerías, todos los archivos necesarios, y nos va a dar como resultado una página web funcional. Ahora, ¿dónde está esto funcionando? Vamos a verlo acá, que parece que está trabajando en el puerto 4200, dentro del servidor "local host". Vamos a copiar esta dirección que está acá, y vamos a abrirla dentro del navegador. Podemos ver acá, que me aparece que la aplicación está funcionando. Me aparece un texto donde dice "app works!". Ahora, voy a modificar rápidamente una parte del contenido para que podamos ver otro detalle que tiene este servidor. Voy a entrar a la carpeta "src", donde se encuentra el código fuente de mi aplicación, y dentro de la carpeta "app" se encuentra el código de la aplicación directamente. Voy a abrir este archivo "html" y el archivo ".ts", donde se encuentra la información. Vemos que acá está una variable que se llama "título", y dentro del archivo "html" estamos desplegándola. Así que, vamos a cambiar primero, dentro del archivo "html" vamos a cambiar esta etiqueta "h1" y la vamos a cambiar por un "h2", simplemente para que veamos un cambio, Voy a "Guardar". Y también, quiero que notes que en la parte de la consola, inmediatamente cuando guardé, empezaron a suceder cosas. Lo que ha sucedido es que la consola, que está atendiendo el servidor, también está poniendo atención a cada uno de los archivos del código fuente. Cada vez que yo guarde algún cambio, va a volver a compilar toda la información y va a generar un resultado dentro de la página web. Ya vamos a revisarlo, pero antes voy a modificar el archivo ".ts" que controla la actual aplicación. Vamos a poner un "Hola mundo". Voy a "Guardar" y en el momento en que guardo vamos a ver que la consola vuelve a trabajar; me dice que todo ha sido compilado exitosamente y estamos listos para revisar el resultado. Vamos a ver, y sin tener que actualizar nada dentro de mi navegador, ya tenemos el resultado. Esto te va a ayudar a trabajar mucho más rápido porque no tienes que estar pendiente del navegador, simplemente haces los cambios y puedes revisar inmediatamente el resultado sin tener siquiera que tocar ningún botón.

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.