Introducción a Angular 2

por | 30/12/2016

Un ejemplo básico de Angular 2

Palabras iniciales

El objetivo de este artículo es mostrar con un ejemplo los conceptos básicos de Angular 2.  Para esto, vamos a hacer un contador de lo más simple. Arrancará en cero, y cuando presionemos sumar, queremos que sume internamente y muestre el valor actual del contador. Análogamente, cuando apretemos restar, deberá decrementar su valor y mostrarlo.

Repositorio del proyecto

Pueden encontrar el código fuente en https://bitbucket.org/etebes/techie-angular2/overview

Manos a la obra

Angular 2 gira alrededor de 2 conceptos: módulos y  componentes. Los módulos son porciones de código separados con algún criterio. Importan otros módulos y declaran componentes. Los componentes son la manera en la que nuestro código interactúa con el usuario final: toman datos de entrada, muestran información. En ambos casos, son pedazos de código que tienen su estado e interactúan con otras porciones de código.

estructura de un proyecto en angular 2

estructura de un proyecto en angular 2

El ejemplo básico de la documentación oficial nos habla de 4 archivos:

  1. index.html
  2. main.js
  3. app.module.js
  4. app.component.js

En main.js se inicia nuestra aplicación. Cuando el DOM está listo, Angular empieza a jugar. Ahí es donde debemos decirle qué módulo queremos que levante. En nuestro caso será AppModule.

En app.module.js encontramos la declaración de dicho módulo, con sus dependencias y declaraciones.

  • Con «imports» decimos de qué otros módulos depende el nuestro.
  • Con «declarations» indicamos qué componentes declaramos en este módulo.
  • Con «bootstrap» le decimos qué componentes queremos mostrar.
  • Disponemos de un constructor para inicializar todo lo que querramos.

En app.component.js ponemos la declaración de nuestro componente.

  • «selector» es la identificación de nuestro componente. Indicamos con qué tag vamos a ir a buscarlo desde el html.
  • «template» es la manera en la que se mostrará nuestro componente (html). Puede ser reemplazado por «templateUrl», que es la URL en la que se encontrará el template html.
  • Disponemos de un constructor para inicializar todo lo que querramos.
  • Luego del constructor declararemos todas las funciones que querramos invocar en nuestro componente. Estas funciones estarán disponibles desde el template de nuestro componente, y las podremos vincular a los eventos que dispare el usuario.

En index.html podremos usar nuestros componentes. Los incluiremos con un tag extendido de html. Por ejemplo, si declaramos un componente llamado contador, luego lo incluiremos así:

 

Algunos links con info de interés en los que me basé

http://www.angular2.com/

https://angular.io/docs/js/latest/quickstart.html

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *