Angular esencial

Anatomía de un componente

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

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 desde la línea de comandos, cuáles son sus partes y cómo usarlos en una aplicación.
08:42

Transcripción

Los componentes son un elemento fundamental en Angular 4. Si Angular es una casa, los componentes son los ladrillos con los que la construimos. Así de importantes son y esa es la forma en que nosotros vamos, en general, a ir construyendo nuestras aplicaciones. Acá yo estoy trabajando en una aplicación que he generado a través de la línea de comandos de Angular. Tengo específicamente una carpeta llamada'src' y dentro de ella una carpeta llamada'app' que es donde tengo el código fuente de mi aplicación. Voy a crear un componente dentro de esta aplicación utilizando la línea de comandos. Para eso voy a escribir el comando'ng generate component' y pongo el nombre del componente, en este caso 'aleatorio' Esto lo que va a hacer es que va a crear un componente con el nombre'aleatorio'dentro de mi proyecto. Como puedes ver, ahora, dentro de la carpeta'app', tengo una subcarpeta llamada'aleatorio', que es donde se encuentran los archivos de mi componente. Vamos a examinarlos uno a uno. Tenemos primero un archivo con el nombre del componente, punto'component. ts'. Acá se encuentra el código fuente de mi aplicación. Quiero que notes que el archivo está con la extensión. ts porque estábamos trabajando en Typescript. Eso significa que estamos utilizando una estructura en particular. Pero aún así, aunque estemos trabajando en Typescript, recordemos que Typescript es completamente compatible con Javascript, lo que significa que podemos utilizar cualquier comando en Javascript, que nos va a funcionar perfectamente en este archivo. Ahora tenemos otros tres archivos, tenemos un archivo llamado'component. spec. ts' donde se encuentran las pruebas que podemos realizar dentro de este componente y así facilitarnos el proceso de Unit Testing. Tenemos dos archivos más que van a ser el HTML y el CSS que van a controlar la parte visual de nuestro componente. Una de las ventajas de esta estructura es que nos va a permitir a nosotros trabajar de forma completamente encapsulada los estilos y la parte gráfica de nuestras aplicaciones a nivel de componentes, lo que significa que simplemente si necesito modificar alguna parte me aplicación, busco el componente en el cual estoy trabajando y modifico únicamente las partes que están ahí. No tengo que modificar un documento gigante donde van a estar todos los estilos o toda la información de la aplicación, puedo trabajar de una forma mucho más modular. Ahora, sabiendo eso, vamos a examinar con un poco más detalle los archivos, específicamente el archivo que define nuestro componente. Vemos que tenemos'aleatorio. component. ts' y aquí está la lógica de este componente. Si revisamos, vemos que tenemos al inicio un'import', los'imports'dentro de nuestros componentes nos van a permitir a nosotros importar funcionalidades de diferentes partes que estén disponibles dentro de nuestra aplicación, este caso específico estamos importando un par de módulos desde el núcleo central de Angular. Una vez que tenemos definidos los'imports'y podemos tener una cantidad indefinida acá de'imports'dentro de nuestro documento, una vez que ya los tenemos vamos a pasar a definir el componente. En este caso, el componente y toda esta sección se llaman los'decorators'. Los'decorators'nos van a permitir a nosotros configurar el componente. En este caso tenemos tres diferentes propiedades: 'selector', que es la forma en que vamos a invocar este componente. Quiero que notes que, por defecto, siempre se va a poner el nombre'app', guión y el nombre del componente que acabamos de definir, en este caso'aleatorio'. Voy a copiar este nombre y lo vamos a usar dentro de un momento. Tenemos también otra propiedad llamada también'templateUrl', donde se define el URL, la ruta de la plantilla –como ves, está definiendo acá el archivo HTML que se encuentra en esta carpeta– y también tenemos'styleUrls' que se define la sección de hojas de estilo de este componente. Una vez que ya tenemos definido los'decorators' de nuestro componente, pasamos a definir la clase, que es donde vamos a trabajar específicamente el componente. En este caso vamos a necesitar dos elementos básicos que van a ser el'constructor', que se va a invocar en el momento en que cargue este componente, esto puede ser al inicio de la aplicación, y tenemos también un evento, en este caso'ngOnInit', que se va a activar en el momento en que este componente se invoque específicamente y que comience a ser activo. La diferencia entre estos dos eventos es que uno se ejecuta al inicio de la aplicación y otro en el momento en que comenzamos a utilizar nuestro componente. Acá, nosotros también podemos incluir una cantidad indefinida de métodos para poder trabajar nuestra aplicación y también podemos incluir diferentes variables. Por ejemplo, yo ahora voy a incluir acá una variable que vamos a llamarla 'alea torio' y la vamos a definir que sea de tipo'Number'. Y acá lo que vamos a hacer es que vamos a incluir un número que se va a generar de forma aleatoria, así que esto significa que vamos a llamar un comando de JavaScript que va a ser'Math' 'floor', que nos va a definir un valor entero. Y acá vamos a definir'Math' punto'random'por'100'. Esto lo que nos va a dar es un número aleatorio que va a ir del 1 al 100. Ahora, como vamos a llamar este valor aleatorio, voy a copiarlo y vamos a incluir primero nuestro componente. Cuando nosotros creamos un componente a través de la línea de comandos, simplemente se va a incluir dentro de nuestro código, se va a inicializar en los diferentes módulos de Angular, pero no va a estar incluido, no va a ser visible dentro del código. De hecho, vamos a inicializar el servidor para poder observar dónde se está incluyendo nuestro componente. Y mientras esto sucede, yo voy a incluirlo. Ahora, ¿dónde lo incluyo? Si nosotros revisamos el archivo'index. html', vamos a ver que tenemos acá una etiqueta que dice'app–route'. Esto lo que está haciendo es que está incluyendo el módulo inicial de nuestra aplicación dentro del archivo 'index. html'acá donde comienza nuestra aplicación. Nosotros vamos a buscar este componente inicial dentro de'app' y buscamos acá'app. component' punto'ts'. Acá es donde se está incluyendo este componente inicial. La plantilla de este componente está en'app' punto'component'punto'html'. Esto es lo que se está mostrando en nuestra aplicación por defecto. Si revisamos, dentro del servidor vemos que acá se está mostrando el texto "Hola mundo" que corresponde a este componente. ¿Dónde lo tenemos? 'App. component'y acá dice'title'. Vemos que acá estamos utilizando una variable y esta variable se está desplegando dentro de nuestro componente. Ahora vamos a incluir el segundo componente, que en este caso es aleatorio. Y simplemente tenemos que llamar una etiqueta, la etiqueta va a tener un valor y en este caso va a ser 'app' guión 'aleatorio'. Y acá es donde estamos invocando nuestro componente. ¿De dónde sale este nombre? Recordemos que acá se ha generado, dentro del selector, el nombre con el que nosotros podemos invocarlo. Y lo único que yo estoy haciendo es incluir esta etiqueta dentro del componente en el cual quiero desplegarla. Y ahora acá, una vez que estamos aquí, vamos a ir a la plantilla y vemos que lo que nos debería mostrar únicamente es el texto "Aleatorio works! " Si revisamos dentro del navegador, vemos que dice "Aleatorio works! ". Y para mostrar la variable en la cual estábamos trabajando, voy a reemplazar ese párrafo por el valor que hemos incluido, que en este caso es el valor'aleatorio' y revisamos el resultado final. Tenemos acá como se está mostrando ya un número aleatorio que es la petición que le he estado haciendo. Y así es como nosotros podemos crear, incluir y modificar los diferentes elementos de un componente en Angular 4.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

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.