Blog personal de David Blanco París: Como empezar con "Angular 2" (BETA)

Acaba de salir hace poco la beta de angular 2, y vamos a ver como crear la estructura básica de un proyecto , para lo cual el articulo lo vamos a dividir en 3 partes:

Que es angular 2.
Configurar nuestro entorno de desarrollo.
Estructura básica de un proyecto de angular 2.

Ojo, hay que tener en cuenta que este articulo se ha realizado con la beta.0 y pueden cambiar algunas cosas.

En la siguiente url os podéis descargar el proyecto de este articulo

¿Que nos ofrece angular 2?

Antes de utilizar un framework tenemos que saber que nos ofrece y si nos merece la pena.

Esta pensado para poder hacer aplicaciones mobiles y proporcionarnos mecanismos, que nos permitan realizar las performance.
Es mas rápido, ya que las actualizaciones se hacen sobre los datos y no en el árbol DOM.
Flexible:

Múltiples lenguajes:

javascript
typescript (Este es el que recomiendan y vamos a usar nosotros).
dart

Mezcla por una lado el estilo de objetos (Clases y decorators (anotaciones de java)), mas la programación funcional y reactiva (para los flujos de datos).

Esto es lo que nos dice la gente de angular 2, yo al menos el ultimo punto por lo que he visto les ha quedado bastante bien, al menos para la gente que venimos del mundo de spring. De las aplicaciones mobiles tampoco piloto tanto para juzgarlo, pero por lo poco que he leído si lo están teniendo en cuanto al menos en el ancho de banda y otras historias.

Herramientas que vamos a usar:

Se necesitan las siguientes herramientas, para poder trabajar:

nodejs: Para descargar las herramientas necesarias.
atomjs: Usaremos el editor de texto atom, que se integra con github + el pluging de typescript
pluging de typescript: Instalamos en atom el siguiente pluging https://atom.io/packages/atom-typescript.

Estas herramientas, solo las vamos a tener que instalar.

Dependencias que vamos a necesitar:

Ahora que tenemos las herramientas, vamos a ver las dependencias que vamos a necesitar para poder trabajar a angular 2:

angular2: la versión (2.0.0-beta.0).
systemjs: la versión (0.19.6).
es6-promise: la versión (3.0.2).
es6-shim: la versión (0.33.3).
reflect-metadata: la versión (0.1.2).
rxjs: la versión (5.0.0-beta.0).
zone.js: la versión (0.5.10).

Las dependencias de desarrollo

concurrently: la versión (1.0.0)
lite-server: la versión (1.3.1)
typescript: la versión (1.7.3)

Para poder configurar todas estas dependencias vamos a utilizar el fichero de package.json

{
  "name": "angular2-holamund",
  "version": "1.0.0",
  "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 que hemos creado el fichero de package.json, lo siguiente que tenemos que hacer es ponerlos en el directorio del proyecto y ejecutar el siguiente comando:

npm install

Una vez ejecutado este comando, se crear en la carpeta de node_modules, todas las dependencias que hemos puesto.

Configurar el atom

Ahora vamos a ver como configurar en atom el typescript, para lo cual en la consola (ctrl + shift + p) de atom escribimos este comando "create tsconfig.json", ahora nos crea el fichero de tsconfig.json que le indica al compilador como tiene que trabajar typescript. Del fichero que nos genera yo le cambio el parámetro de buildOnSave a true, para que cada vez que se guarda un cambio se compilen los ficheros. Y para poder depurar establecemos el parámetro, "sourceMap".

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",

         "sourceMap": true,
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "filesGlob": [
        "**/*.ts",
        "**/*.tsx",
        "!node_modules/**"
    ],
    "compileOnSave": true,
    "buildOnSave": true,
    "files": [
        "boot.ts"
    ],
    "atom": {
        "rewriteTsconfig": true
    }
}

Ahora ya podemos trabajar con typescript en atom,

Configurar el git

En nuestro ejemplo no vamos a guardar en el control de versiones:

*.js: Son los ficheros que se generar de los ts.
*.map: Son los map que generar de los ts, para la deuperación.
node_modules: Es un fichero de trabajo de node, que no tenemos que subir el control de versiones.

Fichero: .gitignore

*.js
*.map
node_modules

Ahora en el directorio raíz creamos este fichero, y ademas estos ficheros ya no se verán en el atom.

Configurar el nodejs

Ahora que ya tenemos configuradas las dependencias, el editor de texto y el control de versiones. Solo nos falta montar en el nodejs, un compilador de typscript y un servidor ligero para poder trabajar. Para lo cual ampliaremos el fichero package.json, ahora vamos a definir el modulo de scripts:

Lanzar el servidor ("start": "live-server"). npm start

Así quedaría el fichero package.json

{
  "name": "angular2-holamund",
  "version": "1.0.0",
  "license": "ISC",
  "scripts": {
    "tsc": "tsc -p app -w",
    "start": "live-server"
  },
  "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"
  }
}

Ya tenemos configurado nuestro entorno para empezar a trabajar con angular 2, cuento todos estos pasos por que al menos para mi la primera vez me llevo algo de tiempo montar toda la infraestructura de primeras.

Estructura de nuestro proyecto

En este apartado vamos a ver los ficheros que vamos a necesitar para montar nuestro ejemplo.

A continuación vamos a ver los ficheros que tenemos que crear.

/app

/app/app.component.ts

/app/boot.ts

/index.html

Los fuentes los vamos a colocar en la carpeta app. Y el fichero donde va estar la pagina principal index.html lo ponemos en la basé del proyecto.

Ahora vamos a ver el orden en el que vamos a seguir para escribir nuestra primera aplicación:

Crear el componente de la aplicación (app.component.ts).
Configurar el arranque de la aplicación (boot.ts).
Escribir la pagina principal (index.html).

Componente de aplicación (app.component.ts)

En este fichero vamos a crear el componente raiz, a partir del cual vamos a construir nuestra aplicación.

En este fichero vamos a ver 3 cosas:

Como importar los recursos . En nuestro caso sera el decorador @Component.
El atributo de componente selector, que sera un selector de la css, donde va a pintar angular 2 el componente.
El atributo de component template, que representa la región de pantalla del controlador.

También tendremos la clase controlador, donde estará la lógica que gestiona el trozo de pantalla que podemos llamar vista. En nuestro ejemplo esta vacía ya que nuestra aplicación solo va a pintar hola mundo.

import {Component} from 'angular2/core';
@Component({
  selector: 'my-app',
  template:' Hola Mundo.'
})
export class AppComponent {}

Aquí es donde crearemos el esqueleto de nuestra aplicación de los componentes que siempre se verán en pantalla, como por ejemplo (El pie, el encabezado,cuerpo)...

Arranque de la aplicación (boot.ts)

Este fichero es el encargado de arrancar angular y establecer las configuraciones. En nuestro ejemplo solo le vamos a indicar cual va ser el componente raíz de la aplicación (AppComponent).

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

bootstrap(AppComponent);

Todos los servicios que se inyecten a este nivel los vera toda la aplicación y compartirán la misma instancia (vamos que sera un singlenton). Ojo en angular tambien podemos inyectar servicios en el contexto de los controladores...

Pagina principal (index.html)

Representa la pagina web, que sera la responsable de cargar nuestra aplicación. En la pagina vamos a tener 3 secciones diferenciadas.

Las librerías de javascript que vamos a utilizar. (es6-shim.js, angular2-polyfills, system.src.js, rx.js, angular2)
Configuración de systemjs (que es la herramienta encargada de cargar los módulos).

Por un lado le indicamos que vamos a registrar todos los ficheros que estan dentro de la carpeta app, con la extensión js.
Por otro lado le indicamos donde se encuentra el fichero por el que vamos a arrancar la aplicación.

Indicar la selección de la región de pantalla donde vamos a pintar la aplicación. Se cargar en la sección de pantalla de my-app.

...

<html>
  <head>
      <title> Angular 2 (Hola mundo)</title>

      <!-- 1. Cargamos las librerias -->
      <script src="node_modules/es6-shim/es6-shim.js"></script>
      <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. Configirar SystemJS -->
      <script>
        System.config({
          packages: {
                  'app': {defaultExtension: 'js' }
                }
          });
        System.import('app/boot')
              .then(null, console.error.bind(console));
      </script>
  </head>
  <body>
      <my-app> Cargando ...</my-app>
  </body

...

Ahora solo nos falta, arrancar la aplicación, con el comando npm start y ver como nos saluda la aplicación.

Blog personal de David Blanco París

lunes, 18 de enero de 2016

Como empezar con "Angular 2" (BETA)