Comienzo este 2016 con uno de los frameworks que más van a dar que hablar a lo largo de este año. Con una serie de artículos, vas a ver que cómo entender un poco mejor Angular 2  y cómo poderlo aplicar en tus desarrollos empresariales. Pero hoy, vamos a abordar los aspectos iniciales para empezar a utilizar el framework.

Introducción

Angular 2, a pesar de su nombre, poco más tiene de parecido con la versión anterior. Es un framework totalmente escrito desde 0 y con una forma de afrontar el desarrollo muy diferente.

Si en la primera versión se optaba por un desarrollo basado en Controllers y Factory, en esta nueva versión el desarrollo está basado en Components,  la nueva moda de desarrollo Web: Web Components. Este nuevo desarrollo está compuesto  en  4 sub-elementos complementarios, pero independientes entre sí:

• Custom Elements (elementos personalizados)
• Templates (plantillas)
• Shadow DOM (DOM oculto)
• HTML Imports

Otra de las características que tiene Angular 2 es que está implementado en TypeScript (en el que los ingenieros de Microsoft y de Google han trabajado codo con codo para que ambos productos mejoren).

Preparando el entorno

Las herramientas con las que vamos a trabajar con Angular 2 son:

• Visual Studio Code. Si no lo conoces, es un editor totalmente gratuito muy ligero y multiplataforma.
• NodeJS

Para empezar, hay que instalar TypeScript usando NodeJS. Para ello, abre una consola y ejecuta la siguiente instrucción:

npm i -g typescript

Una vez instalado el compilador de TypeScript, configura Code para que pueda compilar Typescript directamente. Para ello, lo que tienes que hacer es abrir Visual Studio Code. Por defecto, Code no compila directamente TypeScript. Cuando compilamos la aplicación mediante CTL+Shift+B en un entorno Windows, se muestra el siguiente mensaje:

Pulsa sobre la opción de Configure Task Runner. Se muestra un fichero llamado task.json, donde tienes que modificar el valor que hay dentro de Args. Por defecto, pone HelloWorld.ts, deja ese valor blanco para que pueda compilar todos los ficheros ts que tengas dentro de la carpeta de la solución.

TypeScript es un transpilador de JavaScript que puede desplegar en diversas versiones de EcmaScript (3,5,6,7). Dependiendo de cada proyecto, es posible que necesites indicar unos valores u otros. Para tener esta configuración establecida, crea un fichero tsconfig.json en el que deberás especificar estas características. Por ejemplo:

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

Una vez tengas el entorno listo, en primer lugar crea un fichero package.json en el que vas a definir todas las librerías que a utilizar, así como las dependencias que va a tener tu proyecto:

{
"name": "Encamina CompartiMOSS",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

Una vez creado el fichero packages.json, sitúate en la carpeta de la solución e instala dichos paquetes. Para ello, ejecuta la siguiente instrucción:

npm install

Empezando con el desarollo

Siguiendo con la convención en la nomenclatura de los proyectos en Angular, crea una carpeta App. Dentro de esta carpeta, crea un Componente en Angular2. El componente en angular 2 está formado por un «Decorator» llamado Component. Este component está compuesto:

• Selector: nombre de nuestro componente dentro del html
• Template:: HTML que se va a mostrar
• CSS: Estilos que va a tener este componente.

El código que debes utilizar es el siguiente:

import {Component} from 'angular2/core';
@Component({
    selector: 'blog-desarrollandos',
    template: '
<h1>ANGULAR 2 by ENCAMINA</h1>

'
})
export class AppComponent { }

Una vez tengas creado el componente, tienes que crear el punto de entrada de la aplicación. Para ello, crea un fichero boot.ts en el que invoques a la función bootstrap que está dentro de Angular2. Pásale como dependencia el componente que has creado.

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

Ahora finalmente crea una pagina index.html

<html>
  <head>
    <title>Angular 2 Iniciación by ENCAMINA</title>
    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Muestra la aplicacion -->
  <body>
    <blog-desarrollando>Loading...</blog-desarrollando>
  </body>
</html>

Hay tres secciones destacables de HTML:

1. Carga las bibliotecas de JavaScript que necesites. angular2 – polyfills.js y Rx.js  .
2. Configura la llamada al System y indícale el punto de arranque de tu aplicación .
3. Añade el  selector < blog-desarrollando > en el < body>, para mostrar tu componente.

Finalmente, ves a la carpeta y ejecuta npm start. Este proceso te arrancará el servidor NodeJS y podrás navegar hasta tu aplicación. Si todo ha ido correctamente, se muestra la siguiente pantalla:

Resumen

En este post, has visto cómo empezar a dar tus primeros paso con Angular 2, preparar tu entorno de desarrollo y conocer los aspectos para iniciarte con este framework.

En los siguientes artículos, te contaré en profundidad más detalles, como los binding, routes y otros aspectos más potentes que te proporciona Angular 2. ¿Con ganas de saber más?