En este tutorial aprenderemos a trabajar con el nuevo Angular 2. Desarrollaremos una simple aplicación “Hola Mundo” empezando desde 0 y si se preguntan si debemos saber con anterioridad Angular en su versión 1.0, no se preocupen ya que Angular 2 tiene una gran diferencia comparándolo a sus versiones anteriores.

Bueno, no perdamos más el tiempo y COMENCEMOS!

Hola Angular 2!

Esta será la estructura de nuestro proyecto.

Básicamente, en el directorio raíz tenemos el archivo index.html y una carpeta llamada “app” que contiene dos archivos: app.component.js que es un componente de la aplicación y el main.js que viene siendo el controlador principal.

Se me olvida comentarles, Angular 2 está basado en una programación orientado a componentes (la nueva tendencia en programación) que quiere decir con esto, que cada funcionalidad que le agregamos a nuestro proyecto se agrupa en un archivo, la definición concreta de un componente es “Un componente es un objeto escrito de acuerdo a unas especificaciones”. Un ejemplo de un componente podría ser una lista, cada lista contiene determinados elementos, un estilo y sus elementos podría tener algún evento, la lista en sí es un componente que puede ser reutilizado.

Después esta pequeña información, continuamos…

Entorno de desarrollo.

Necesitaremos un punto de apoyo (la carpeta de proyecto de aplicación), algunas bibliotecas y su editor de elección.

Creamos la carpeta del proyecto.

Te recomiendo el gestor de paquetes npm para adquirir y gestionar las bibliotecas de desarrollo.

Agrega el archivo package.json a la carpeta del proyecto, copia y pega el siguiente código.

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",

    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

Instale los paquetes mediante la ventana de su terminal (ventana de comandos en Windows) y ejecuta el siguiente comando npm.

Nuestro primer componente

El componente es el más fundamental de los conceptos de Angular 2 como lo habíamos mencionado antes. Por esa razón vamos a escribir una gran cantidad de ellos a medida que construyamos aplicaciones de Angular 2. Este es nuestro primer intento así que hay que guardarlo aunque parezca simple.

Creamos la subcarpeta en nuestro directorio raíz

Ahora creamos un archivo dentro la carpeta app que creamos con anterioridad con el nombre de app.component.js y copiamos el siguiente código.

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Estamos creando un componente visual llamado AppComponent encadenando el componente y los métodos de la clase que pertenecen al namespace global del núcleo de angular, ng.core.

A continuación le dejamos el esquema del componente.

app.AppComponent =
    ng.core.Component({
    })
    .Class({
    });

El método de componentes toma un objeto de configuración con dos propiedades. El método de clase es donde ponemos en práctica el componente en sí mismo, dándole propiedades y métodos que se unen a la vista y cualquier comportamiento es apropiado para esta parte de la interfaz de usuario.

Se escucha más complicado de lo que parece pero no se preocupen, vamos a revisar este archivo en detalle.

Modulo

Todas las aplicaciones con Angular 2 son modulares. Se componen de muchos archivos cada uno dedicado a un propósito.

Vamos a crear un único espacio de nombres global para nuestra aplicación. Lo llamaremos app y añadiremos todos nuestros artefactos de código a este objeto global.

No queremos contaminar el espacio de nombres global con cualquier otra cosa. Así que dentro de cada archivo rodeamos el código en un IIFE (“Immediately Invoked Function Expression”), en español, Inmediatamente se invoca la expresión de la función.

(function(app) {
})(window.app || (window.app = {}));

Pasamos el objeto global de app dentro del IIFE, teniendo cuidado para inicializar con un objeto vacío si no existe todavía.

Nuestro archivo app.component.js exporta el AppComponent.

app.AppComponent =

Una aplicación más sofisticada tendría componentes hijo que descendieron de AppComponent en un árbol visual y tendría más archivos y módulos.

Nuestro “Hola mundo” no es una aplicación sotisficada; solo necesitamos un componente para explicarles lo que Angular 2 está intentando hacer con la progración orientada a componentes. Sin embargo, los módulos tienen un papel fundamental en la organización incluso en esta pequeña aplicación.

Los módulos se basan en otros módulos. Cuando necesitamos algo proporcionada por otro módulo, lo obtenemos desde el objeto app y cuando otro módulo necesita hacer referencia a AppComponent, se obtiene desde app.AppComponent como esto:

ng.platformBrowserDynamic.bootstrap(app.AppComponent);

Angular también es modular. Es una colección de módulos de biblioteca. Cada biblioteca es en sí mismo un módulo formado por varios módulos de características relacionadas.

Cuando necesitamos algo de angular, utilizamos el objeto ng.

Objecto .Class()

El objecto .Class() no se hace nada para nuestra clase AppComponent en estos momentos. Cuando construyamos una aplicación más compleja podremos ampliar este objeto con propiedades y lógica de la aplicación. Nuestra clase AppComponent tiene nada más un constructor vacío porque no lo necesitamos para hacer cualquier cosa en ésta aplicación básica.

.Class({
  constructor: function() {}
});

Objecto .Component()

ng.core.Component() le dice angular que esta definición de clase de objeto es un componente de Angular. El objeto de configuración pasado al método ng.core.Component() tiene dos campos, un selector y una plantilla.

ng.core.Component({
  selector: 'my-app',
  template: '

Mi Primera app con Angular 2

‘ })

El selector especifica un selector CSS simple para un elemento HTML llamado my-app. Angular crea y muestra una instancia de nuestra AppComponent donde quiera que se encuentra un elemento my-app en el HTML anfitrión.

Recuerde que el selector de mi aplicación! Necesitaremos esa información cuando escribimos nuestro index.html

La propiedad template sostiene la plantilla del componente. Una plantilla es una forma de HTML que le dice angular cómo representar una vista. Nuestra plantilla es una sola línea de código HTML anunciando “Mi Primera app con Angular 2”.

Ahora necesitamos decirle a Angular para cargue este componente.

Iniciarla!

Agregamos un nuevo archivo llamado main.js a la capeta app/. En este archivo escribimos el siguiente código.

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

Necesitamos dos cosas para iniciar la aplicación:

• La función Bootstrap de Angular 2
• El componente raíz de la aplicación que acabamos de escribir.

Luego llamamos la rutina de carga, pasando el tipo componente de raíz, AppComponent.

Hemos pedido a Angular que lance la aplicación en un navegador con nuestro componente en la raíz. Ahora, ¿Dónde lo mostrará Angular?

Agregamos el archivo index.html

Angular muestra nuestra aplicación en una ubicación concreta en el index.html. Así que creamos el archivo index.html.
No vamos a poner nuestro index.html en la carpeta app/. Vamos a localizarnos un nivel hacia arriba, en la carpeta raíz del proyecto.

Ahora, escribimos el siguiente código en el archivo index.html

    
        
        

        
         
        
        
        
        
 
        
        
        
        
         
        
        
    
     
    
    
        
        Cargando...
    

Hay tres secciones destacables en el HTML:

• Cargamos las bibliotecas de JavaScript que necesitamos.
• Cargamos nuestros propios archivos JavaScript, tomando en cuenta que main.js necesita que app.component.js esté declarada antes.
• Añadimos la etiqueta <my-app> en el <body>. Aquí es donde le damos vida a nuestra aplicación!

Cuando Angular 2 llama a la función de arranque en main.js, que lee los metadatos AppComponent, encuentra el selector de my-app, localiza una etiqueta llamada my-app, y se carga nuestra aplicación entre esas etiquetas.

Agregamos algo de estilo

Los estilos no son esenciales, pero son agradables, e index.html asume que tenemos una hoja de estilo llamado styles.css. Así que creamos un archivo styles.css en la carpeta raíz del proyecto para comenzar a darle estilo a nuestra aplicación.

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

A correr nuestra primera app con Angular 2!

Abrimos nuestra terminal y escribimos el siguiente comando:

npm start

Este comando ejecuta un servidor estático llamado lite-server que instalamos desde el inicio en el archivo package.json. Éste server carga el index.html en un navegador y actualiza el navegador cuando cambian los archivos de aplicación.

En unos instantes, una pestaña del navegador deberá abrirse y mostrar:

Mi Primera app con Angular 2

¡Felicitaciones! Estamos en el negocio de Angular 2.

¿Te gusto el artículo?

Puedes suscribirte a nuestra lista de correos para recibir más artículos como éste.

Compartir en: