Crear un componente nuevo con Angular 2

  • Por
  • y  
En este artículo te vamos a enseñar a crear un nuevo componente con Angular CLI y luego a usarlo en tu aplicación Angular 2.

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.

Nota: En realidad nadie te obliga a tener un componente único como raíz. Podrías crear un componente y usarlo directamente en el index.html de tu aplicación. Haciendo esto convenientemente no habría ningún problema por ello. Aunque debido a que ese index.html es código generado y generalmente no lo querremos tocar, será más recomendable crear los componentes debajo del componente raíz.

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

Nota: Existe un alias para la orden "generate" que puedes usar para escribir un poco menos. Sería simplemente escribir "g".

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.

Nota: Angular CLI es quien maneja y genera el código de system-config.ts, por lo que nosotros no tendremos que tocar nada generalmente. No obstante, queríamos mostrar este detalle para que no pasase desapercibido.

Javascript de nuestro componente

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

Nota: Apreciarás que deberíamos decir que contiene el "código TypeScript del componente", dado que en realidad a día de hoy Angular CLI solo tiene la opción de generar código TypeScript. No debe representar un gran problema para ti, porque realmente todo código Javascript es también código TypeScript, al que se le agregan ciertas cosas, sobre todo para el control de tipos.

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.

Nota: No hemos entrado todavía, pero seguro que alguno ya se lo pregunta o quiere saberlo. El componente tiene un archivo CSS (aunque se pueden definir varios en el decorador del componente) y podemos editarlo para colocar cualquier declaración de estilos. Veremos más adelante, o podrás comprobar por ti mismo, que esos estilos CSS se aplican únicamente al componente donde estás trabajando y no a otros componentes de la aplicación.

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.

Autor

Alberto Basalo

Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript, como NodeJS y MongoDB. Es director de Ágora Binaria, empresa dedicada al desarrollo de aplicaciones y a la formación a través de Academia Binaria.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Hans

28/8/2016
Como se usa el componente?
Hola amigo... quisiera saber como se utiliza ese componente que creamos.... Saluds.!!

garraxxi

21/9/2016
system-config.ts
Dónde puedo encotrar el archivo system-config.ts???