Después de nuestro repaso teórico a la figura de los componentes en Angular 2 estamos en condiciones de irnos al terreno de lo práctico y ver cómo se generan nuevos componentes en una aplicación.

Si abres el index.html que hay en la carpeta "src" verás como en el body existe un único componente. Ahora, todos los que desarrollemos en adelante estarán dentro de ese primer componente. Esto no es nuevo, puesto que ya se comentó en el Manual de Angular 2, pero está bien recordarlo para que quede claro. Partiremos de esta situación agregando ahora nuevos componentes con los que podremos expandir la aplicación.

Creamos un componente a través de Angular CLI

Ya usamos Angular CLI para generar el código de inicio de nuestra aplicación Angular 2. Ahora vamos a usar esta herramienta de línea de comandos para generar el esqueleto de un componente. Desde la raíz del proyecto lanzamos el siguiente comando:

ng generate component nombre-del-componente

ng g component nombre-del-componente

Además de componentes, la orden generate te permite crear el esqueleto de otra serie de artefactos como son directivas, servicios, clases, etc.

Reconociendo los archivos del componente

Si observas ahora la carpeta "src/app" encontrarás que se ha creado un directorio nuevo con el mismo nombre del componente que acabamos de crear. Dentro encuentras una serie de archivos que ya te deben de sonar porque los hemos analizado ya para el componente inicial de las aplicaciones Angular2.

Ahora además queremos fijarnos en un archivo que se llama index.ts, que verás que solo tiene un export.

export { NombreDelComponenteComponent } from './nombre-del-componente.component';

Como ves, está exportando el propio componente, por su nombre. Ese componente es una clase (de OOP) que hay en "nombre-del-componente.component.ts", que a su vez se exportaba también.

export class NombreDelComponenteComponent implements OnInit {

En resumen, el archivo index.ts únicamente sirve para que, cuando importas un componente desde otro lugar de tu aplicación, no tengas que referirte al archivo "nombre-del-componente.component.ts" con todas sus letras, sino simplemente a la carpeta donde se encuentra.

Componente declarado para SystemJS

En todos los lugares donde, en adelante, deseemos usar ese componente tendremos que importarlo para que se conozca su código. Para ello hemos visto que solo tendremos que indicar el nombre del componente y no el archivo donde se escribió su clase.

Pero por debajo, para realizar todo lo que es la carga de módulos, se utiliza en una aplicación Angular 2 SystemJS. No nos hemos metido en profundidad con este sistema, pero básicamente lo que hace es traernos el código de aquello que necesitemos.

Dentro de system-config.ts se administran todas las librerías que podremos importar con SystemJS. Entre ellas encontrarás que se hace una declaración del nuevo componente que acabamos de generar.

// App specific barrels.
  'app',
  'app/shared',
  'app/nombre-del-componente',

Esa declaración es la que realmente permite que, cuando importamos el componente, no tengamos que preocuparnos por la estructura de archivos que tiene, simplemente lo importamos con el nombre de la carpeta donde se encuentra.

Javascript de nuestro componente

El archivo "nombre-del-componente.component.ts" contiene el código Javascript del componente.

Debes reconocer ya diversas partes:

• Imports de todo aquello que necesitemos. En principio de la librería @angular/core, pero luego veremos que aquí iremos colocando muchos otros imports a medida que vayamos necesitando código de más lugares.
• Decorador del componente, para su registro.
• Clase que hace las veces del controlador, que tengo que exportar.

Además ahora te pedimos simplemente echar un vistazo a la cabecera de la clase, en concreto a su "implements":

export class NombreDelComponenteComponent implements OnInit {

Ese implements es una interfaz, que no están disponibles todavía en Javascript, ni tan siquiera en ES6, pero que ya son posibles de usar gracias a TypeScript. Es simplemente como un contrato que dice que dentro de la clase del componente vamos a definir la funcion ngOnInit(). Sobre esa función no hablaremos mucho todavía, pero es un lugar donde podremos colocar código a ejecutar cuando se tenga la certeza que el componente ha sido inicializado ya.

Solo a modo de prueba, vamos a crear una propiedad llamada "dato" dentro de nuestro componente recién creado. El código nos quedará algo como esto:

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-nombre-del-componente',
  templateUrl: 'nombre-del-componente.component.html',
  styleUrls: ['nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent implements OnInit {

  dato = "Creando componentes para DesarrolloWeb.com";
  
  constructor() {}

  ngOnInit() {
    console.log('componente inicializado...');
  }

}

HTML del componente

El componente que acabamos de crear tiene un HTML de prueba, ya escrito en el archivo "nombre-del-componente.component.html".

Podemos agregarle la expresión para que se vea en el componente la propiedad que hemos generado del lado de Javascript, en la clase del componente. Tendrías algo como esto:

<p>
  nombre-del-componente works!
</p>
<p>
  {{ dato }}
</p>

Puedes abrir ese HTML y colocar cualquier cosa que consideres, simplemente a modo de prueba, para comprobar que consigues ver ese texto ahora cuando usemos el componente.

Con esto hemos terminado de explicar todo lo relativo a la creación de un componente. El componente está ahí y estamos seguros que estarás ansioso por verlo en funcionamiento en tu proyecto. Es algo que veremos ya mismo, en el próximo artículo del Manual de Angular 2.