馃巿Componentes 馃巿

Los componentes son una parte muy esencial de una aplicaci贸n en Angular y en este articulo espero darte una introducci贸n de ellos.

Existen muchos conceptos b谩sicos de Angular que se pueden mirar individualmente, aunque tambi茅n conviene conocerla desde sus entra帽as. Desde all铆, una aplicaci贸n en Angular est谩 compuesta por un conjunto de componentes y servicios, pero en esta secci贸n vamos a abordar a los primeros.

驴Qu茅 es un Componente? 馃摝

Si miramos un componente desde una definici贸n muy b谩sica que es un elemento que compone a un todo y si lo llevamos a un punto de vista anat贸mico del ser humano, este puede ser un brazo, una pierna, etc.

Un componente es un elemento reutilizable. Puede ser desde un elemento HTML como un <button> hasta una lista (<ul><li></li></ul>), un <header>, un <section>, o un conjunto de etiquetas o elementos <div> que tengan una funcionalidad en particular.

Intenta en tus aplicaciones no usar tantos <div> utiliza correctamente la sem谩ntica del HTML, con esto quiero decir que es bueno usar elementos <section> o <article> donde los requieres en lugar de poner un <div> que haga las veces de los elementos anteriores.

驴Qu茅 es un componente en Angular? 馃叞锔

Un componente en Angular es un elemento que est谩 compuesto por:

  • Un archivo que ser谩 nuestro Template (app.component.html), el cual es nuestro HTML, que es el que se va a visualizar en la interfaz de usuario, la vista o en t茅rminos m谩s simples lo que vas a ver en la p谩gina.

  • Un archivo de l贸gica, la cual es la que pondremos en un archivo .ts (como por ejemplo app.component.ts), ese archivo debe incluir una clase y esta es la que va a contener las propiedades que se van a usar en la vista (HTML) y los m茅todos que ser谩 las acciones que se ejecutar谩n en la vista. En este archivo de l贸gica tambi茅n se incluye una metadata, que es definida con un decorador, que identifica a Angular como un componente.

  • Un archivo para el CSS (podemos usar un preprocesador como SASS o LESS), donde incluiremos los estilos, lo que nos ayuda a hacer bonita nuestra aplicaci贸n.

La extensi贸n .ts hace alusi贸n a Typescript, el cual es el lenguaje usado en Angular y es un superset de JavaScript.

驴Qu茅 es un decorador?

Si vamos a un t茅rmino muy t茅cnico, un decorador es una implementaci贸n de un patr贸n de dise帽o de software que permite extender una funci贸n dentro de otra funci贸n, sin modificar la original de la que se est谩 extendiendo. En t茅rminos simples un decorador nos permite decorar una funci贸n a la cual deseamos especificarle unos metadatos, en ellos se informa sobre la funci贸n y sus comportamientos. Las funciones decoradoras inician por una "@" y a continuaci贸n tienen un nombre.

Adicional a los dos anteriores que son los principales en nuestro componente podemos ir a帽adiendo m谩s archivos de acuerdo a la necesidad que tengamos en nuestro proyecto.

Como por ejemplo:

  • Un archivo para el test, donde podemos incluir nuestras pruebas unitarias.

Y podemos incluir muchos archivos m谩s.

Debemos pensar en una aplicaci贸n de Angular como un conjunto de componentes que trabajando conjuntamente van a permitir que nuestro usuario tenga la mejor experiencia posible.

Cuando iniciamos nuestra aplicaci贸n en Angular usando Stackblitz, la aplicaci贸n nos crea un componente 鈥楢pp鈥 que contiene 5 archivos, donde pondremos en ellos el HTML, la l贸gica de nuestro componente, los estilos, las pruebas unitarias, y el app module, como lo muestra la imagen adjunta:

En Stackblitz podemos crear m谩s componentes solo con dar clic derecho sobre una de las carpetas, vamos a la opci贸n 鈥楢ngular Generator鈥

Seleccionamos componente y aparece un campo donde ingresamos el nombre de nuestro componente y daremos enter.

Una vez presionamos enter se nos ha creado un componente nuevo, con la misma estructura de archivos del componente 鈥楢pp鈥

Cuando estamos creando un proyecto en Angular usando el CLI y ejecutando el siguiente comando:

ng new my-app

Creamos toda la estructura inicial de un proyecto en Angular que incluye el componente App. Si deseamos crear m谩s componentes solo debemos ejecutar el siguiente comando:

ng generate component <name> [options]

Se puede usar la forma abreviada:

ng g c <name> [options]

Last updated