Hello World en AngularJS 2 con typescript y NPM (Node.js)

Update: Ha habido algunas diferencias en la implementación de Angular 2 en su versión beta, así que os aconsejo que después de este artículo, busquéis las diferencias leyendo:

http://www.disenoactivo.es/programadores/angular-2-beta-diferencias-con-la-version-alpha-48

Habiendo trabajado ya en algunos proyectos en AngularJS 1.4, y ante la próxima llegada de AngularJS 2, que está aún en alpha, hay que ir poniéndose al día y aprender cómo funciona el popular framework de javascript, y como toda primera prueba, empezaré con el popular y genuino Hello World.

Tened en cuenta que el código utilizado se basa en la versión más reciente de Angular 2, alpha 48, puede haber detalles que cambien cuando se publique la versión final.

Aunque AngularJS 2 se puede programar en javascript y dart, el lenguaje más extendido a día de hoy es typescript, así que aquí seguiremos esa tendencia.

Typescript viene a ser ES6 con más funcionalidades típicas de la OOP, ya que incluye chequeo de tipado, interfaces, genéricos, enumeraciones, decoradores etc... (más info aquí).

En este artículo aprenderemos a instalar AngularJS con npm de Node.js, no obstante, hay muchas maneras de instalar AngularJS 2.
Podéis bajarlo directamente en github, con JSPM (muy recomendado), o utilizar boilerplates con yeoman etc....

En cualquier caso, bajo cualquier sistema de instalación, al final lo que necesitamos es:

- compilar typescript, para ello hay que instalarlo en nuestro sistema

- instalar librerías de AngularJS 2.

- instalar systemJS, que es un cargador de módulos de ES6 (y mucho más) que angularJS necesita.

- opcional: instalar un servidor, opcional ya que podemos aprovechar el servidor que utilicemos previamente: apache, dnx, IIS etc...

- opcional: instalar un plugin que refresque el navegador ante cambios. Para esto hay muchas soluciones, en nuestra instalación de npm usamos además del watch de typescript, live-server pero por ejemplo para grunt / gulp existe wiredep que funciona muy bien.

Comprobaciones iniciales

Lo primero es asegurarnos de tener instalado Node.js y npm (podéis visitar la web de Node.js e instalarlo).
Después aseguraros de tener la última versión de npm (se necesita al menos la versión 2.0 de npm):

Si queremos saber la versión de npm que tenemos instalada:

npm -v

Si queremos actualizar la versión:

sudo npm install npm -g

Creación de carpetas

Iremos al directorio donde queremos almacenar nuestro proyectoy creamos una carpeta que llamaremos "angularhelloworld" y dentro otra que llamaremos "src".

Inicializamos node en dicha carpeta, para ello desde un terminal con cd a nuestra carpeta, escribimos:

npm init -y

Contestamos a las preguntas que nos surjan pero básicamente podemos pulsar enter a cada vez.


Esto nos creará el siguiente package.json.

Más tarde os comento cómo debe quedar.

{
"name": "angularhelloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"typescript": "^1.7.3"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Instalación de módulos con npm

Siguiente paso, instalamos typescript, este módulo igual que los siguientes se pueden instalar globalmente, simplemente añadid a cada script de npm el parámetro "-g", no obstante, yo voy a instalarlo localmente para no crear dependencias con la máquina y poder trasladar mi proyecto sin más.

En el caso de typescript sí voy a añadirlo globalmente así me aseguro que cuando ejecute scripts en el terminal, encuentre la ruta del módulo de typescript, cosa que no me ha funcionado al instalarlo de forma local:

npm i typescript -g --save-dev

El argumento "--save-dev" hará que la referencia a typescript se grabe en el fichero package.json en la propiedad "devDependencies", es decir, una librería que en producción no se necesitará.

Instalamos angularjs 2:

npm i angular2 --save --save-exact

El argumento "--save" hará que la referencia a angular se grabe en el fichero package.json en la propiedad "dependencies", es decir, una librería que en producción SÍ se necesitará.

Si miramos en nuestra carpeta angularhelloworld, ahora tendremos angular2 instalado como módulo de node:

Ahora instalaremos el SystemJS, que es un cargador de módulos de ES6, CommonJS, AMD... (si queréis saber más, aquí lo explican claramente), en nuestro proyecto Hello World, lo utilizaremos para cargar nuestro módulo HelloWorld y para que angularJS pueda cargar los módulos que necesita.

SystemJS va mucho más allá y también permite compilar código ES6 con Typescript, Babel o Traceur, etc.

Esto no lo vamos a aprovechar en nuestra aplicación Hello World, porque nosotros queremos que SystemJS sirva los ficheros compilados ya, pero habría formas de que SystemJS sirviera los archivos typescript ts compilándolos sobre la marcha. Cosa que no es óptima en un entorno de producción, claro.

npm i systemjs --save --save-exact

Instalamos el live server para crear un servidor http con el que visualizar el proyecto, y que además refresque ante cualquier cambio:

sudo npm i live-server

Si no queremos que el servidor sea un servidor "live", podéis instalar el siguiente:

npm install http-server

Configurando scripts y dependencias en package.json

Ahora escribiremos los scripts que necesitamos en nuestro archivo package.json.

El primer script será para ejecutar typescript, indicamos que mi proyecto se encuentra en la carpeta "src" y le añado "-w" para añadirle el watch que controlará cualquier cambio en código.

También añadiremos el script para iniciar nuestro http server, y las dependencias que necesitará el proyecto:

"scripts": {
"tsc": "tsc -p src -w",
"start": "live-server --open=src"
}

Quedando el package.json así:

{
"name": "angularhelloworld",
"version": "1.0.0",
"description": "",
"dependencies": {
"systemjs": "^0.19.6",
"angular2": "^2.0.0-alpha.47"
},
"devDependencies": {
"typescript": "^1.7.3",
"live-server": "^0.8.2"
},
"scripts": {
"tsc": "tsc -p src -w",
"start": "live-server --open=src"
}
"author": "",
"license": "ISC"
}

Configuracion tsconfig.json

Ahora desde terminal inicializaremos typescript en la carpeta src, abrimos terminar y escribimos lo siguiente:

tsc --init

Esto creará un archivo tsconfig.js:

Vamos a cambiar el json para que quede así,lo que viene a decir que compilará con compatibilidad de ES5 (básicamente todos desde IE9):

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true
}
}

Si queréis saber más, aquí podéis consultar un recurso de fácil lectura:

https://basarat.gitbooks.io/typescript/content/docs/project/tsconfig.html

Configuración terminada ahora el código

Para completar el proyecto Hello World, crearemos un fichero index.html en la carpeta src con el siguiente contenido:

<html>
<head>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages:{'app':{defaultExtension: 'js'}}
});
System.import('app/app');

</script>
</head>
<body>
<my-app> loading....</my-app>
</body>

</html>

En nuestro HTML incluimos las librerías de systemjs y de angularjs (que son las 2 librerías imprescindibles), y además le decimos que importe las librerías js de la carpeta app donde residirá nuestro código javascript compilado ya por typescript.

Crearemos una carpeta llamada app en src, y en la carpeta src/app el siguiente archivo app.ts.

Nuestros archivos quedarían así:

El fichero app.ts contendrá nuestro typescript, recordad el app.js no lo generamos nosotros, y escribimos lo siguiente:

/// <reference path="../../node_modules/angular2/angular2.d.ts">

import{bootstrap, Component} from 'angular2/angular2'

@Component({
selector:'my-app',
template: '<h1> Angular2 hello world</h1>'
})

class AppComponent
{}

bootstrap(AppComponent);

Aquí simplemente le indicamos que añada un componente con selector my-app y que escriba nuestro hello world.

Cada componente (que es una mezcla de controlador y directiva de AngularJS 1) está compuesto (valga la redundancia) de:

  • al menos un decorator (que es como se le llama) @Component
  • un decorator @View, aunque puede ir integrado dentro de @Component (como en nuestro ejemplo).
  • la clase del componente y que se suele llamar con el sufijo "Component" al final, aunque no sea obligatorio.

Más arriba vemos que demás le decimos que importe los módulos bootstrap y Component de nuestra librería angular 2.

Último paso

Ahora abriremos el terminal en la carpeta raíz "angularhelloworld", y escribiremos:

npm run tsc

Y en otra pestaña:

npm start

Con esto typescript irá recompilando el código que generemos a javascript, y nuestro servidor nos mostrará el resultado de nuestro esfuerzo!:

Estos 2 últimos pasos se pueden automatizar con gulp/grunt, esto ya lo veremos en otro tutorial.

El código del tutorial

Para aquellos que habéis llegado hasta esta línea y aún no os habéis puesto con las manos en la masa, aquí el código resultante, yo personalmente os aconsejo ir construyendo el proyecto paso por paso, pero si os habéis quedado atascados en algún momento os puede servir de ayuda:

https://github.com/dactivo/Angularjs-2-helloworld

Referencias

Además de mi experiencia personal, me he basado en las enseñanzas :-) de los siguientes enlaces:

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

https://www.youtube.com/watch?v=xQQ0SEM34M4&feature=youtu.be

Escrito el 02 dic 2015
comments powered by Disqus

« Cómo "localizar" los mensajes de error por defecto en ASP.NET MVC - Error con dnx / mono en Mac: ExceptionHandlerMiddleware: kqueue() FileSystemWatcher has reached the maximum number of files to watch »