Ionic, ngCordova y el plugin Geolocation
Ionic, ngCordova y el plugin Geolocation

En este tutorial vamos a ver cómo crear un todo(lista de tareas) con Phonegap, Angularjs y OnsenUI.

En esta ocasión los datos no se guardarán de forma permanente, sino en un simple array javascript el cuál puede contener n elementos en forma de objeto.

Para recorrer la información haremos uso de ng-repeat y para eliminarlos utilizaremos la variable $index que nos proporciona angularjs dentro de ng-repeat, de esta forma sabremos la posición del elemento que queremos eliminar en cada caso.

Finalmente tendremos algo similar a la siguiente imagen.

Todo con Phonegap, AngularJS y Onsen UI

Lo primero que debemos hacer es ir a la web de OnsenUi y descargar la master-detail, una vez la tengamos la colocamos en nuestro espacio de trabajo y añadimos la plataforma que deseemos, en nuestro caso android y la abrimos con nuestro editor para modificar el index.html y que quede de la siguiente forma.

Una vez lo tengas hecho, abre el archivo js/app.js y haz la modificación necesaria para que quede como el siguiente código.

Para conseguir el botón rojo que elimina las tareas abre el archivo styles/onsen-css-components.css y añade el siguiente css al final del mismo.

Ahora y alo tenemos todo, si compilas tu aplicación y la ejecutas en tu dispositivo verás como te aparece el mismo contenido que en la imagen y puedes añadir y eliminar nuevas tareas de forma sencilla.

Espero que te haya gustado, nos vemos en siguientes tutoriales, saludos.