Angular 2 y Meteor
Angular 2 y Meteor

En este tutorial vamos a ver cómo configurar Angular 2 y Meteor para realizar aplicaciones utilizando typescript con la última versión de Angular.

Angular 2 es un framework que trabaja en el cliente el cual nos permite desarrollar aplicaciones en versión web y móvil utilizando typescript aunque también es posible utilizar Dart y Javascript. Gracias a Angular 2 el desarrollo de aplicaciones se hace mucho más sencillo y nos permite hacer cosas complejas con muy poco código.

Meteor es una plataforma completa construida sobre NodeJS que nos provee tanto el cliente como el servidor para que podamos crear aplicaciones completas sólo con javascript, las bases de datos las maneja con mongodb a través de colecciones y utiliza un tipo de bases de datos en el cliente llamada minimongo la cual es una copia exacta de la base de datos en el servidor y se sincroniza de forma automática cuando se ejecuta cualquier operación contra la misma.

Meteor tiene un package llamado urigo:angular2-meteor para utilizar Angular 2 dentro de Meteor sin la necesidad de realizar ninguna configuración adicional, y de eso va a tratar este tutorial, utilizar este package para desarrollar aplicaciones con Angular 2 y Meteor con lo mejor de cada uno de ellos.

Para no reinventar la rueda, vamos a seguir la guía de Angular 2 Meteor y vamos a tratar de hacer algo más dinámica nuestra aplicación reutilizando componentes y separando lo más posible la lógica de cada zona, a continuación puedes ver un gif con la aplicación finalizada para ver el resultado.

Angular 2 y Meteor

Enlaces de interés:

Instalar Meteor

Si no tienes instalado Meteor simplemente dirígete a esta web y selecciona tu sistema operativo, es así de sencillo.

Crear el proyecto con Meteor

Para crear nuestro proyecto con Meteor simplemente colócate en el directorio donde desees crear la aplicación y ejecuta el siguiente comando.


Ahora vamos a eliminar los tres archivos de nuestra aplicación para partir de 0, el .css, .html y .js.

Instalar Angular 2 Meteor

Para combinar Angular 2 y Meteor debes ejecutar el siguiente comando dentro de tu proyecto, el cual instalará el package necesario.


Para evitar que Meteor concatene los archivos .html y nuestra aplicación con Angular 2 no sea capaz de funcionar necesitamos eliminar un package con el siguiente comando, recuerda estar dentro de tu proyecto.


De esta forma, cada template o directiva asociado a un componente seguirá perteneciendo a él y se evitará que el html final sea concatenado.

Otra configuración que debemos llevar a cabo es la de eliminar el package ecmascript para evitar conflictos entre typescript y el package ecmascript de Meteor. El package Ecmascript viene por defecto desde Meteor 1.2.

Instalar bootstrap 3 para Meteor

Para poder utilizar el popular framework css bootstrap 3 con Meteor debemos ejecutar el siguiente comando a fin de instalarlo.

Primera aplicación con Angular 2 y Meteor

Nuestra aplicación va a tener la siguiente estructura de directorios y archivos.

Primera aplicación con Angular 2 y Meteor

Cómo puedes ver, tenemos tres directorios bien diferenciados, client, collections y server, si no entiendes el comportamiento de estos directorios te recomiendo que revises este tutorial.

Descargar el código desde mi repositorio de github.

Lo primero que vamos a hacer es crear dentro de client un archivo llamado index.html, este será el archivo principal de Angular 2.


Como le estamos diciendo que cargue el archivo client/bootstrap, vamos a crearlo y le añadimos el siguiente contenido, recuerda que la extensión debe ser .ts.


El anterior archivo simplemente es el bootstrap de Angular 2.

Cómo ya hemos comentado, vamos a trabajar con Mongodb y utilizaremos colecciones, así que crea un archivo llamado parties.ts dentro de collections con el siguiente código, así tendremos la posibilidad de guardar información de forma persistente.


Si queremos tener datos por defecto en nuestra aplicación vamos a crear el archivo load-parties.ts dentro del directorio server con el siguiente contenido, si conoces Meteor, esto seguro que te suena :P.


Lo anterior sólo no hace nada, para que funcione, debemos crear el archivo main.ts dentro del directorio server y llamarlo, de paso ejecutamos la función Meteor.startup.

Formulario para crear Parties

Nuestra aplicación sólo va a manejar parties, para ello, vamos a crear un único formulario que servirá tanto para crear cómo para editar, no vamos a validarlo pero sí veremos cómo añadirle atributos para que sea reutilizable, así que crea el archivo client/parties-form/parties-form.ts y añade el siguiente código typescript.


Nuestro formulario va a ser utilizado desde fuera, es decir, no tendrá una ruta asociada, por lo tanto vamos a utilizar @Input para añadirle una serie de valores y así hacerlo más dinámico.

Ahora debemos crear el archivo client/parties-form/parties-form.html, el cuál representará el formulario html.


Algo interesante puede ser la forma en la que le añadimos una clase al vuelo utilizando [class.form-inline]=”!isUpdate”, simplemente le decimos que si isUpdate es false (no estamos actualizando una party), añada la clase form-inline al formulario, una clase de bootstrap que nos permite definir si queremos que el formulario se muestre en vertical o horizontal.

Llegados a este punto ya tenemos definido el formulario que nos permitirá crear y editar parties, sólo debemos utilizarlo, así que vamos a empezar por crear el componente PartiesApp, crea el archivo client/parties/parties.ts y añade el siguiente código.


Algo muy importante de este componente sucede en su constructor, y es el uso del módulo Tracker de Meteor, gracias a él podemos utilizar Programación Reactiva Transparente, para nuestro caso, la base de datos será sincronizada cada vez que ocurran cambios.

Pero eso no es todo, podemos ver que utilizamos el método run de la clase ngZone, ¿para qué?, para que los cambios realizados se vean reflejados en tiempo real en el dom, si ejecutamos autorun con el método .runOutsideAngular() los cambios serán aplicados de la misma forma pero no reflejados.

Ahora crea el archivo client/parties/parties.html para mostrar las parties que están en la base de datos.


Gracias a las propiedades que hemos definido en nuestro formulario, podemos utilizar party y action para cambiar su comportamiento.

Teniendo ya definido el componente principal, vamos a crear el componente que nos permitirá editar parties, empezaremos por el archivo client/parties-detail/party-detail.ts.


Y su respectivo archivo .html client/parties-detail/party-detail.html.


Finalmente sólo nos queda crear el archivo client/app/app.ts para lanzar nuestra aplicación y realizar la configuración de las rutas, es así de sencillo.


Para lanzar la aplicación en el navegador simplemente ejecuta el siguiente comando y abre http://localhost:3000.


Y eso es todo, así de sencillo es crear una aplicación utilizando Angular 2 y Meteor.

Descargar el código desde mi repositorio de github.