Continuando con la guía de Angular, hoy explicaremos lo que son los componentes y como crearlos. Debemos pensar un componente como un elemento que compone a un todo, si lo llevamos a un ejemplo: si tenemos una casa un componente puede ser una puerta, una ventana, todo lo que compone al todo que en este caso seria la casa.
Un componente es un elemento reutilizable, puede ser un elemento HTML como una lista, un botón, un header o un conjunto de etiquetas que cumplan con una funcionalidad.
Tabla de contenidos
¿Como esta compuesto un componente en Angular?
Un componente en Angular esta compuesto por:
- Un archivo que sera nuestro Template/Vista (app.component.html).
- Un archivo de lógica, el cual se encargara de la funcionalidad del componente, este archivo es un typescript del cual hablaremos mas adelante en la guía (app.component.ts).
- Un archivo de estilos CSS para la maquetación de nuestro componente.
Un componente puede tener mas archivos, depende del proyecto y de las necesidades del mismo. Entonces al final: la aplicación Angular es el todo y esta compuesta por varios componentes que la conforman.
Creando componentes en Angular
Para crear componentes en Angular existen dos maneras de hacerlo: desde la terminal y de manera manual. En esta guía veremos la forma de generar el componente desde la terminal ya que es una buena practica y nos ahorra el escribir el componente a mano.
Para esta guía utilizaremos el ejemplo que generamos en el primer capitulo de la guía, imaginemos que quiero crear un componente para agregar un menú en todas las paginas, escribimos el siguiente comando:
-> ng generate component menu
La terminal nos dará la información que muestra la imagen anterior, se han creado 4 archivos como mencionamos en el bloque anterior: html, css y ts. El archivo con extensión .spec.ts sirve para hacer testing pero por el momento es suficiente saber eso, este archivo no se tocaría normalmente.
Si vamos a la estructura de nuestro proyecto podemos notar que se han generado los archivos en src/app/nombre_del_componente (en este caso menu).
¡Listo!, ya tenemos generado nuestro componente en Angular, cabe mencionar que todos los componentes generados desde la terminal se agregaran a la carpeta app. Con esto ya sabemos cómo crear componentes y como se agregan a nuestro proyecto, aunque ésto es solo una parte de todo lo que se puede hacer con rutas y componentes.
Lo que siempre recomiendo es separar cada cosa en varios componentes, por ejemplo, un componente para mostrar la cabecera de una página, otro para el footer, el home, etc. Para páginas pequeñas esta estructura es más tediosa de programar pero para páginas más grandes es la mejor estructura ya que al estar todo dividido en componentes es más fácil de mantener ya que cada cosa funciona independiente.
Estructura básica de un componente en Angular
Ahora con el componente creado, veremos la estructura que nos traen los archivos .css, .html y .ts. Los archivos .html y .css son los que menos misterio tienen ya que son archivos normales que inclusive podemos tener vacíos por el momento. Ambas sintaxis se escriben igual que siempre.
Algo importante de mencionar es que el css y html que escribamos aquí solo afectara a su componente no a los otros o al principal que se crea al iniciar el proyecto. Esto ayuda muchísimo ya que cada componente tiene sus estilos y evitamos el miedo de repetir clases o estilos que se encimen.
Si vemos ahora el archivo .ts también llamado controlador, es el que define la lógica del componente. La estructura básica es la siguiente:
Lo primero que realiza es importar Component de @angular/core, esto debido a que invoca el método @Component que tiene 3 propiedades:
- selector: El selector es el nombre que va a tener la etiqueta HTML que sirve para poder usar este componente, para este ejemplo del menu será
<app-menu></app-menu>, es decir, desde el HTML de cualquier otro componente poniendo esa etiqueta se pintará el componente menu. - templateUrl: La ruta al archivo .html de ese componente para crear la vista.
- styleUrls: La ruta al fichero .css de ese componente para los estilos de la vista.
Por último hacemos export class con el nombre del componente (sin guiones). Dentro del export se crea el método constructor (vacío por el momento). Cuando creamos el componente desde la terminal, automáticamente nuestro archivo app.module.ts se actualizara e importara el componente como podemos ver a continuación:
Y así es como terminamos de agregar un componente a nuestro proyecto, en la siguiente entrada aprenderemos a crear rutas con el sistema de routing de angular y a mostrarlas en la vista del proyecto.