Angular y Meteor
Angular y Meteor



En esta entrada vamos a ver lo sencillo que es crear un crud con Angular Meteor. Angular Meteor es un package para meteor que nos permite utilizar Angular sin colisionar dentro de Meteor.

Si te interesa una introducción a Angular Meteor a continuación te dejo un videotutorial del blog donde vemos cómo hacer la instalación y un par de cosas.

Angular-meteor: Introducción

Crear el proyecto

Para crear el proyecto simplemente ejecuta el siguiente comando desde la terminal.


Eso habrá creado y lanzado el proyecto en la url http://localhost:3000/, debes poder ver el mensaje de bienvenida, perfecto.

Instalar las dependencias con atmosphere

Ya que vamos a trabajar con AngularJS, necesitamos movernos por la aplicación y queremos un diseño decente, vamos a instalar los siguientes packages con Atmosphere.


Cómo puedes ver hemos instalado Angular, ui-router y bootstrap para Meteor, esas dependencias ya serán cargadas de forma automática por meteor.

Configuración inicial, rutas y módulo con AngularJS

Elimina los tres archivos que hay en la raíz del proyecto y crea un archivo llamado app.js con el siguiente código para iniciar el proyecto.


Cómo puedes ver, inyectamos el módulo angular-meteor, el cuál nos permite utilizar angular y también el ui-router.

Es muy importante que todo el código de AngularJS esté dentro de la condición Meteor.isClient, de otra forma no funcionará.

La configuración de las rutas creo que es algo que no necesita explicación a estas alturas, finalmente declaramos el controlador PostsCtrl al cuál le pasamos el $scope, $meteor, $state y $stateParams, $meteor nos permitirá acceder a los datos de Mongo cómo veremos más adelante.

La vista principal

Ahora crea el archivo index.html con el siguiente código.


La directiva ui-view renderizará todas las rutas que hemos establecido en la configuración de la app.

Mostrar todos los Posts

Crea el archivo post-list.ng.html y añade el siguiente código.


Cómo puedes ver, simplemente es AngularJS, lo importante es ver cómo obtenemos los posts, así que añade la siguiente línea al archivo app.js antes de la condición Meteor.isClient.


De esta forma la colección posts estará disponible en el cliente y en el servidor, recordemos que todo lo que está fuera del cliente y del servidor carga en ambos sitios.

Para obtener todos los posts simplemente añade la siguiente línea dentro del controlador PostsCtrl.


Si revisas el navegador debes ver el mensaje Add new post, asi que vamos a ello.

Crear nuevos Posts

Crea el archivo post-add.ng.html y añade el siguiente formulario html.


Si te fijas, tenemos un evento ng-click el cuál llama al método save, vamos a definir este método en el controlador.


Demasiado simple pero suficiente, al tener disponible la variable de alcance $scope.posts simplemente con hacer push el registro será guardado en base de datos, una vez se haya guardado iremos de nuevo a la lista de posts y veremos que ya aparece el registro.

Editar los Posts

Crea el archivo post-edit.ng.html y añade el siguiente código.


Lo mismo que antes, excepto que aquí estamos utilizando la directiva ng-init para obtener el post que corresponde a esta zona, también tenemos el evento ng-click llamando al método update, veamos cómo obtener y actualizar el post.


Muy claro y sencillo, a través del método save actualizamos el post que tenemos actualmente.

Eliminar un Post

Para eliminar un post añade el siguiente código en el controlador PostsCtrl.

Eliminar todos los Posts

Para eliminar todos los posts añade el siguiente código en el controlador PostsCtrl.


Igual que eliminar un post, la única diferencia es que no necesitamos pasar ningún objeto al método remove.

Espero que te haya parecido interesante y sencillo.