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

Angular 2 práctico: Sitio de consumo de videos

Crear un componente con Angular CLI

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Los componentes son el bloque fundamental de una aplicación Angular, pero crearlos e instalarlos manualmente puede ser un proceso lento y complicado. En esta lección aprenderemos cómo crearlos de forma automatizada desde la línea de comandos.
06:12

Transcripción

En esta lección, vamos a crear un nuevo componente de Angular 2.0. Vamos a utilizar la línea de comandos de Angular. Yo acá estoy trabajando dentro de un proyecto que he creado utilizando esta misma línea de comandos y estoy trabajando dentro de la terminal de "Visual Studio". Vamos a entrar a la carpeta donde se encuentra mi proyecto. En este caso, estoy trabajando dentro de la carpeta "angular", y dentro de la subcarpeta "sitio-videos" que es en donde está mi proyecto, así que vamos a poner "cd .\angular\sitio-videos". Y esto me va a llevar donde se encuentra mi proyecto. Ahora sí, voy a tener acceso a la línea de comandos de "angular". Para crear un nuevo componente voy a incluir el comando "ng g". La 'g' significa "generar". Y vamos a poner el nombre de lo que queremos generar, en este caso, un componente, "component". Y le vamos a definir el nombre al componente. En este caso, se va a llamar "header" y lo voy a utilizar para incluirlo en el encabezado de mi documento. Voy a presionar "Enter". Y esto va a crear, en este caso... Vamos a ver. Tiene algunos archivos que ya estaban generados. Así que voy a ponerle que reescriba cualquier archivo que se encuentre. En caso de que no los tenga generados, vas a ver, directamente, el resultado. Ya tenemos la información lista. Y entramos a la carpeta "src", donde se encuentran los archivos fuente de nuestra aplicación, específicamente en la carpeta "app". Y vamos a encontrar una carpeta que se llama "header". Esta carpeta se acaba de generar, automáticamente, utilizando la línea de comandos que también, de paso, incluyó cuatro archivos, en los cuales se encuentra dentro de "header.component.ts", todo el código que vamos a utilizar para controlar nuestro componente. Dentro de los archivos ".css" y ".html", que se encuentran en esta carpeta, es que vamos a controlar la parte visual de este componente. Otro detalle que ha sucedido tras bambalinas, es que dentro del documento "app.module.ts", vamos a abrirlo, se acaba de incluir una nueva línea para importar este componente que acabamos de hacer. Todo esto se hizo automáticamente. No tenemos que perder tiempo haciendo tareas tediosas. Todo se hace solo, a través de la línea de comandos. Ahora, ya tenemos listo lo que sería nuestro componente y está listo también para poderlo trabajar no hay que hacer ningún otro elemento. Vamos a probarlo, utilizando nuestro servidor. Y para probarlo, voy a incluir el comando "ng serve", para activar mi servidor. En este caso, yo voy a trabajar con dos diferentes servidores, tanto el servidor de Apache como el servidor en el cual yo voy a trabajar mi código dentro de Angular, al menos durante la etapa de desarrollo. En este caso, voy a trabajar con el servidor "localhost:4200", utilizando el puerto 4200. Y vemos acá el resultado, con nuestra aplicación funcionando. Quiero que notes que el "localhost:4200" está dándonos los resultados de nuestra aplicación en su fase de desarrollo de Angular, pero también tengo un servidor "Apache", que está funcionando de manera separada, en este caso, sin la información del puerto. Tenemos dos diferentes servidores trabajando. Voy a volver al código de mi aplicación, y voy a incluir este nuevo encabezado. Esta es la forma de incluir, al menos de forma básica, los encabezados dentro de Angular 2.0, al menos cuando utilizamos la línea de comandos. Vamos a ir al archivo, en donde nosotros queremos que se muestre la información. En este caso, vamos a buscar dentro de "app" el archivo llamado "app.component.html" donde en este momento se está mostrando un título. En este caso, es una variable, vamos a poner acá "Hola". Voy a guardar. Y como está activo el servidor, se van a mostrar los cambios después de generar una compilación automática, y vamos a ver que dice "Hola". Vamos a modificarlo para que se muestre en este documento nuestro nuevo encabezado. En este caso, yo voy a incluir una etiqueta con el nombre de mi nuevo componente. ¿Cómo sé el nombre de mi nuevo componente? Bueno, lo revisamos dentro de la carpeta "header" que es el componente que acabo de crear. Busco el archivo "header.component" o para el caso, de manera general, el nombre del componente, ".component.ts". Y vamos a encontrar que siempre vamos a tener este valor "selector" y, en este caso, se llama "app-header". Este nombre lo genera automáticamente la línea de comandos. En general, va a ser "app-" el nombre del componente que estamos creando. Ahora, voy a copiarlo. Vamos a cerrar este documento. Y voy a incluirlo dentro de mi documento. ¿Cómo lo incluyo? Simplemente, pongo una etiqueta que se llame exactamente como el selector, en este caso, "app-header". Vamos a guardar la información. Quiero que notes que no estoy poniendo ninguna información en el medio de esta etiqueta, porque lo que esté en el medio de esto va a ser reescrito por la información que se encuentre en este HTML. De hecho, vemos que dice acá "header works!". Revisamos nuestra aplicación. Y vamos a ver que en la parte superior, en el mismo lugar en donde pusimos esa etiqueta, aparece "header works!". Vamos a cambiarlo para poner nuestro propio texto. Y ponemos acá "Encabezado", guardamos, esperamos a que compile nuestro servidor. Revisamos una vez más y tenemos el resultado de "Encabezado". Esa es la forma general, en que nosotros vamos a incluir los diferentes componentes dentro de Angular. Simplemente los creamos, los definimos y, una vez que estemos preparados para incluirlos dentro de un documento, los llamamos utilizando una etiqueta con su nombre.

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.