En Angular 2 se desarrolla en base a componentes. Desde la aplicación más básica de Angular 2, el Hola Mundo, todo tiene que comenzar por un componente. Nuestra aplicación "componetizada" constará la verdad de un árbol de componentes de n niveles, desde un componente principal a sus hijos, nietos, etc.

Por si no lo sabes, los componentes son como etiquetas HTML nuevas que podemos inventarnos para realizar las funciones que sean necesarias para nuestro negocio. Pueden ser cosas diversas, desde una sección de navegación a un formulario, o un campo de formulario. Para definir el contenido de esta nueva etiqueta, el componente, usas un poco de HTML con su CSS y por supuesto, un poco de Javascript para definir su funcionalidad.

Básicamente eso es un componente, una de las piezas fundamentales de las aplicaciones en Angular, que nos trae diversos beneficios que mejoran sensiblemente la forma de organización de una aplicación, su mantenimiento, reutilización del código, etc.

Para comenzar a introducirnos en el desarrollo en base a componentes vamos a realizar en este primer artículo un análisis del componente inicial, que contiene de toda aplicación Angular y que podemos encontrar en el proyecto básico creado vía Angular CLI.

Localizar el componente inicial

En el Manual de Angular 2 hemos visto que nuestra aplicación se desarrolla en el directorio "src". Allí encontramos el archivo index.html raíz de la aplicación.. Si lo abres verás que no tiene ningún contenido en sí. Apenas encontrarás el uso de un componente, una etiqueta que no pertenece al HTML y que se llama de una manera similar al nombre que le diste al proyecto, cuando lo creaste con Angular CLI.

<proyecto-angular2-app>Loading...</proyecto-angular2-app>

Este es el componente donde tu aplicación Angular 2 va a vivir. Todos los demás componentes estarán debajo de éste, unos dentro de otros. Todo lo que ocurra en tu aplicación, estará dentro de este componente.

El texto que está dentro del componente (Loading...) es lo que aparecerá en el navegador mientras no carga la página. Una vez que la aplicación se inicie, Angular lo sustituirá por el contenido que sea necesario.

Entendiendo el código del componente

El código de este componente está generado de antemano en la carpeta "src/app". Allí encontrarás varios ficheros que forman el componente completo, separados por el tipo de código que colocarás en ellos.

proyecto-angular2.component.html: Equivale a lo que conocemos por "vista" en la arquitectura MVC.

proyecto-angular2.component.css: Permite colocar estilos al contenido, siendo que éstos están encapsulados en este componente y no salen para afuera.

proyecto-angular2.component.ts: Es el archivo TypeScript, que se traducirá a Javascript antes de entregarse al navegador. Sería el equivalente al controlador en el MVC.

proyecto-angular2.component.spec.ts: Un archivo TypeScript destinado a tareas de testing de componentes.

El archivo HTML, o lo que sería la vista, admite toda clase de código HTML, con etiquetas estándar y el uso de otros componentes. Además podemos colocar expresiones (entre dobles llaves), expresar bindig entre componentes, eventos, etc.

Entre el HTML de la vista encontrarás:

{{title}}

Eso es una expresión. Angular lo sustiruirá por el contenido de una variable "title" antes de mostrarlo al cliente. Esa variable se define en lo que sería el controlador en el patrón MVC, solo que en Angular 2 no se le llama controlador, o "controller". Ahora es una clase que podemos encontrar en el archivo TypeScript "proyecto-angular2.component.ts". Si lo abres encontrarás varias cosas.

• El import de "component" dentro de @angular/core
• Una función decoradora que hace la acción de registrar el componente
• La clase que hace las veces de controlador

La función decoradora observarás que declara diversas cuestiones.

@Component({
  moduleId: module.id,
  selector: 'proyecto-angular2-app',
  templateUrl: 'proyecto-angular2.component.html',
  styleUrls: ['proyecto-angular2.component.css']
})

Una de ellas es el "selector" de este componente, o el nombre de la etiqueta que se usará cuando se desee representar. Luego está asociada la vista (propiedad "templateUrl") al archivo .html del componente y su estilo (propiedad "styleUrls") a un array de todas las hojas de estilo que deseemos.

En la clase del componente, que se debe colocar con un export para que se conozca fuera de este módulo, es la parte que representa el controlador en una arquitectura MVC. En ella colocaremos todas las propiedades y métodos que se deseen usar desde la vista.

export class ProyectoAngular2AppComponent {
  title = 'proyecto-angular2 works!';
}

Esas propiedades representan el modelo de datos y se podrán usar expresiones en las vistas para poder visualizarlas.

Alterando el código de nuestro componente

Para terminar este artículo vamos a hacer unos pequeños cambios en el código del componente para comprobar si la magia de Angular está funcionando.

Algo muy sencillo sería comenzar por crear una nueva propiedad en la clase del componente. Pero vamos además a colocar un método para poder usarlo también desde la vista.

export class ProyectoAngular2AppComponent {
  title = 'Manual de Angular 2 de DesarrolloWeb.com';
  visible = false;
  decirAdios() {
    this.visible = true;
  }
}

Ahora vamos a ver el código HTML que podría tener nuestra vista.

<h1>
  {{title}}
</h1>
<p [hidden]="!visible">
  Adiós
</p>
<button (click)="decirAdios()">Decir adiós</button>

En este HTML hemos incluido más cosas de las que puedes usar desde Angular. Habíamos mencionado la expresión, entre llaves. También encuentras el uso de una propiedad de un elemento, como es "hidden", entre corchetes (nuevo en Angular 2). Además de la declaración de un evento "click" que se coloca entre parénteis.

En este caso lo que tenemos en la propiedad "visible" de la clase, que hace las veces de controlador, se usa para asignarlo e la propiedad hidden del elemento "p". El método de la clase, decirAdios() se usa para asociarlo como manejador del evento "click".

Hablaremos más adelante de todas estas cosas que puedes colocar en las vistas y algunas otras, junto con las explicaciones sobre la sintaxis que se debe usar para declararlas.

Otra cosa interesante del entorno de trabajo es que, si usas Visual Studio Code u otro editor con los correspondientes plugin TypeScript, te informarán de posibles errores en los archivos .js. Es una ayuda muy útil que aparece según estás escribiendo.

Con esto acabamos nuestro primer análisis y modificaciones en el componente inicial. Estamos seguros que esta última parte, en la que hemos modificado el código del componente básico, habrá resultado ya algo más entretenida.