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

Angular 2 práctico: Sitio de consumo de videos

Creación de un proyecto y análisis de sus componentes

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección aprenderemos a usar la línea de comandos de Angular para automatizar la creación de una aplicación. Aprenderemos también los comandos de la consola para crear diferentes elementos requeridos dentro de una aplicación.
07:14

Transcripción

En esta lección vamos a crear un proyecto Angular, el cual, posteriormente, vamos a integrar con PHP. Estoy trabajando acá dentro de la carpeta pública, de mi servidor llamada HTDOCS, y he creado una carpeta llamada Angular, donde voy a crear el proyecto con el que voy a trabajar. Para comenzar a trabajar sobre este proyecto, voy a abrir la terminal de Visual Studio, y esta terminal automáticamente va a estar apuntando directamente a la carpeta en la que me encuentro, que en este caso es HTDOCS. Así que voy a utilizar el comando "cd" para cambiar al directorio de Angular. Y, ahora, voy a utilizar la línea de comandos de Angular para crear un nuevo proyecto, utilizando el comando "ng new", y vamos a ponerle —a este proyecto— "sitio-videos", y esto va a crear automáticamente toda la información relacionada con mi proyecto. Ahora, un dato importante, aunque los archivos de este curso se encuentren disponibles y puedas utilizarlos para crear el proyecto tal cual lo estoy haciendo, me gusta también crearlo desde cero para que podamos explorar un poco más las sutilezas de la creación de un proyecto. Sin embargo, si quieres utilizar los archivos fuente, puedes copiarlos directamente y ponerlos dentro de la carpeta Angular utilizando el nombre: "sitio-videos". Ahora, vamos a familiarizarnos un poco con los archivos que va a crear mi proyecto. Específicamente, vamos a ver que hay una carpeta que se llama: "sitio-videos", que es el nombre del proyecto que acabo de crear. También vamos a tener unos archivos de configuración, específicamente, vamos a tener uno que se llama "package.json". En el caso de que hayas descargado los archivos desde el repositorio, —los archivos de este curso— es importante que antes de trabajar, ejecutes en la terminal... —y acá voy a abrir otra ventana para no interrumpir el proceso principal— y que utilizando el comando que yo acabo de insertar dentro de la terminal, también tienes que escribir, una vez finalizado, "npm install" . Esto es importante porque vas a descargar todo los archivos relacionados con este proyecto. En caso de que no lo instales, no vas poder tener acceso a toda la información. Cuando ejecutes este comando, —el cual no ejecutaré en este momento porque toma un tiempo— se creará esta carpeta llamada: "node_modules", y acá vamos a tener toda la información relacionada con nuestro proyecto. Dicho eso, vamos a volver a la carpeta: "src", y, acá, vamos a revisar los archivos en los que vamos a trabajar. Vamos a tener una carpeta llamada: "app", donde se va a encontrar toda la información de nuestra aplicación. También, vamos a tener una carpeta llamada "assets", donde vamos a ir depositando todos los archivos relacionados con los recursos, por ejemplo, las imágenes o algún archivo adicional que nosotros necesitemos instalar como, por ejemplo, videos. Vamos a tener más archivos de configuración dentro de este proyecto, pero básicamente vamos a trabajar dentro de la carpeta "app". Acá es donde se encontrarán todos nuestros módulos y componentes para poder trabajar. Vamos a entrar dentro de esta carpeta, ya que estoy en la carpeta HTDOCS, así que voy a volver a poner: "cd angular", y ya que estoy dentro de Angular, entraré también a "sitio-videos", en este caso: "cd sitio-videos". Listo. Entonces, ahora, ya me encuentro dentro de mi proyecto. Asegúrate siempre que a la hora de ejecutar cualquier comando, —como el que te mencioné de "npm install"— te encuentres directamente en la ruta de tu directorio. Es importante que te encuentres exactamente en la ruta en la que se encuentra el archivo "package.json". Dicho eso, también vamos ahora a ejecutar un comando que nos permitirá ejecutar este servidor, y aunque nosotros vamos a trabajar con archivos en PHP durante el desarrollo de nuestra aplicación en Angular, vamos a trabajar en un servidor separado. Para poder ver los archivos dentro del servidor temporal, vamos a escribir el comando "ng serve". Esto va a mostrar los archivos relacionados con nuestro proyecto. Voy a presionar "Enter", y vamos a tener acceso al servidor en el puerto 4200. Es importante notar que aunque estamos trabajando con un servidor "Apache", —que muy posiblemente también esté trabajando en el servidor local— vamos a trabajar en puertos distintos. Voy a entrar ahora a nuestra aplicación, —que es esta— que se encuentra trabajando en el puerto 4200. Yo estoy trabajando también con Apache, pero Apache está trabajando en otro puerto. Así que, por ejemplo, si entro al "localhost" sin definir un puerto específico, nos va a mostrar los archivos directamente que se encuentran en PHP. Así que vamos a trabajar durante el tiempo de desarrollo de Angular con dos servidores separados. También, vamos a revisar un poco sobre la estructura en la que trabaja nuestra aplicación. Angular trabaja con componentes y módulos, así que, para poder modificar los elementos de nuestra aplicación, nosotros vamos a necesitar instalar nuevos componentes. Los componentes nos van a permitir a nosotros crear nuevas pantallas, nuevos documentos. Básicamente, un componente va a estar formado por algunos archivos específicos. En este caso, revisemos el componente inicial de nuestra aplicación. Vamos a tener un Archivo ".ts", donde está la configuración básica de nuestro componente. Acá es donde nosotros incluiremos toda la programación, todas las conductas del componente, según vayamos necesitando. Vamos a generar también un archivo con el mismo nombre de nuestro componente, pero con la extensión "spec.ts". Esto lo que contiene son las especificaciones para poder realizar las pruebas de control de calidad de nuestra aplicación. Vamos a tener dos archivos adicionales CSS y HTML, ambos con el mismo nombre de nuestro componente, donde se incluirá la parte visual de nuestro componente. En este caso, la parte de HTML que es lo que se va a reflejar dentro del navegador, y CSS que va a ser un archivo para incluir los estilos y la parte visual de nuestra aplicación en general.

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.