Unodepiera

Tutoriales, videotutoriales y cursos sobre desarrollo web y mvil

TODO PHP

RUBY ON RAILS

TODO JAVASCRIPT

PREMIUM

MVIL

CURSOS

POLYMER

MYSQL

PYTHON

DJANGO

CONTACTO

Crud con Angular Meteor

16 agosto, 2015 / israel965

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 introduccin a Angular Meteor a continuacin te dejo un videotutorial del blog donde vemos cmo
hacer la instalacin y un par de cosas.
Angular-meteor: Introduccin

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 aplicacin y queremos un diseo decente, vamos a
instalar los siguientes packages con Atmosphere.

Cmo puedes ver hemos instalado Angular, ui-router y bootstrap para Meteor, esas dependencias ya sern cargadas de
forma automtica por meteor.

Configuracin inicial, rutas y mdulo con AngularJS

Elimina los tres archivos que hay en la raz del proyecto y crea un archivo llamado app.js con el siguiente cdigo para iniciar
el proyecto.

Cmo puedes ver, inyectamos el mdulo angular-meteor, el cul nos permite utilizar angular y tambin el ui-router.
Es muy importante que todo el cdigo de AngularJS est dentro de la condicin Meteor.isClient, de otra forma no
funcionar.
La configuracin de las rutas creo que es algo que no necesita explicacin a estas alturas, finalmente declaramos el
controlador PostsCtrl al cul le pasamos el $scope, $meteor, $state y $stateParams, $meteor nos permitir acceder a los
datos de Mongo cmo veremos ms adelante.

La vista principal
Ahora crea el archivo index.html con el siguiente cdigo.

La directiva ui-view renderizar todas las rutas que hemos establecido en la configuracin de la app.

Mostrar todos los Posts

Crea el archivo post-list.ng.html y aade el siguiente cdigo.

Cmo puedes ver, simplemente es AngularJS, lo importante es ver cmo obtenemos los posts, as que aade la siguiente
lnea al archivo app.js antes de la condicin Meteor.isClient.

De esta forma la coleccin 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 aade la siguiente lnea 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 aade el siguiente formulario html.

Si te fijas, tenemos un evento ng-click el cul llama al mtodo save, vamos a definir este mtodo 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 aade el siguiente cdigo.

Lo mismo que antes, excepto que aqu estamos utilizando la directiva ng-init para obtener el post que corresponde a esta
zona, tambin tenemos el evento ng-click llamando al mtodo update, veamos cmo obtener y actualizar el post.

Muy claro y sencillo, a travs del mtodo save actualizamos el post que tenemos actualmente.

Eliminar un Post
Para eliminar un post aade el siguiente cdigo en el controlador PostsCtrl.

Eliminar todos los Posts

Para eliminar todos los posts aade el siguiente cdigo en el controlador PostsCtrl.

Igual que eliminar un post, la nica diferencia es que no necesitamos pasar ningn objeto al mtodo remove.
Espero que te haya parecido interesante y sencillo.
Comprtelo:

Me gusta:

Me gusta
S el primero en decir que te gusta.

Relacionado

Angular 2 y Meteor
En "Angular 2"

Angular-meteor: Introduccin
En "AngularJS"

Crud con Angular 2 y Laravel 5

En "Angular 2"

Posted in AngularJS, Meteor

Crear un mdulo en el cliente con MEAN.IO

Curso de Angular 1.4.4