En este artículo del Manual de Angular 2 queremos abordar el concepto del componente desde un punto de vista teórico, sin entrar a ver cómo se construyen en Angular 2. Esa parte práctica la dejaremos para el próximo artículo, aunque cabe recordar, para los que se impacientan por ver código, que ya dimos una zambullida en el código de los componentes cuando comenzamos con el "hola mundo".

El objetivo es entender mejor cuál es la arquitectura promovida por Angular 2 para el desarrollo de aplicaciones y qué papel específico desempeñan los componentes. Es importante porque toda aplicación Angular 2 se desarrolla en base a componentes y porque es algo relativamente nuevo en el framework.

Árbol de componentes

Una aplicación Angular 2 se desarrolla a base de crear componentes. Generalmente tendrás un árbol de componentes que forman tu aplicación y cada persona lo podrá organizar de su manera preferida. Siempre existirá un componente padre y a partir de ahí podrán colgar todas las ramas que sean necesarias para crear tu aplicación.

Esto no resultará nada extraño, pues si pensamos en una página web tenemos un mismo árbol de etiquetas, siendo BODY la raíz de la parte del contenido. La diferencia es que las etiquetas generalmente son para mostrar un contenido, mientras que los componentes no solo encapsulan un contenido, sino también una funcionalidad.

En nuestro árbol, como posible organización, podemos tener en un primer nivel los bloques principales de la pantalla de nuestra aplicación.

• Una barra de herramientas, con interfaces para acciones principales (lo que podría ser una barra de navegación, menús, botonera, etc.).
• Una parte principal, donde se desplegarán las diferentes "pantallas" de la aplicación.
• Un área de logueo de usuarios.
• Etc.

Luego, cada uno de los componentes principales se podrá subdividir, si se desea, en nuevos árboles de componentes.

• En la barra de herramientas principal podríamos tener un componente por cada herramienta.
• En el área principal podríamos tener un componente para cada "pantalla" de la aplicación o "vista". A su vez, dentro de cada "vista" o "pantalla" podíamos tener otra serie de componentes que implementen diversas funcionalidades.
• Etc.

Los niveles del árbol serán los que cada aplicación mande, atendiendo a su complejidad, y cada desarrollador estime necesario, en función de su experiencia o preferencias de trabajo. A medida que componetizamos conseguimos dividir el código de la aplicación en piezas menores, con menor complejidad, lo que seguramente sea beneficioso.

Si llegamos a un extremo, y nos pasamos en nuestra ansia de componetizar, quizás obtengamos el efecto contrario. Es decir, acabemos agregando complejidad innecesaria a la aplicación, puesto que existe un coste de tiempo de trabajo y recursos de procesamiento para posibilitar el flujo de comunicación entre componentes.

Componentes Vs directivas

En Angular 2 perdura el concepto de directiva. Pero ahora tenemos componentes y la realidad es que ambos artefactos se podrían aprovechar para usos similares. La clave en este caso es que los componentes son piezas de negocio, mientras que las directivas se suelen usar para presentación y problemas estructurales.

Puedes pensar en un componente como un contenedor donde solucionas una necesidad de tu aplicación. Una interfaz para interacción, un listado de datos, un formulario, etc.

Para ser exactos, en la documentación de Angular 2 nos indican que un componente es un tipo de directiva. Existien tres tipos de directivas:

Componentes:
Un componente es una directiva con un template. Habrá muchas en tu aplicación y resuelven necesidades del negocio.
Directivas de atributos:
Cambian la apariencia o comportamiento de un element. Por ejemplo tenemos ngClass, que nos permite colocar una o más clases de CSS (atributo class) en un elemento.
Directivas estructurales:
Son las que realizan cambios en el DOM del documento, añadiendo, manipulando o quitando elementos. Por ejemplo ngFor, que nos sirve para hacer una repetición (similar al ngRepeat de Angular 1.x), o ngIf que añade o remueve elementos del DOM con respecto a una expresión condicional.

Por tanto, a diferencia de otras librerías como Polymer, donde todo se resuelve mediante componentes, hay que tener en cuenta qué casos de uso son los adecuados para resolver con un componente.

Las partes de un componente

Aunque también hemos analizado anteriormente, cuando repasamos la aplicación básica de Angular 2 generada con Angular CLI, cuáles son las partes fundamentales de un componente, vamos a volver a este punto para poder ver sus piezas de manera global.

Un componente está compuesto por tres partes fundamentales:

• Un template
• Una clase
• Una función decoradora

Las dos primeras partes corresponden con capas de lo que conocemos como MVC. El template será lo que se conoce como vista y se escribe en HTML y lo que correspondería con el controlador se escribe en Javascript por medio de una clase (de programación orientada a objetos).

Por su parte, tenemos el decorador, que es una especie de registro del componente y que hace de "pegamento" entre el Javascript y el HTML.

Todas estas partes son las que vamos a analizar en los próximos artículos con mayor detalle, comenzando por los decoradores, que introduciremos en el próximo artículo.