Ionic, ngCordova y el plugin Geolocation
Ionic, ngCordova y el plugin Geolocation
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial vamos a ver cómo crear una sencilla aplicación con phonegap utilizando el potente framework javascript Angularjs. Si no conoces demasiado AngularJS puedes comprar el curso a través del cuál entenderás perfectamente el trabajo con él y lo que vamos a ir explicando en futuros tutoriales sobre phonegap.

También vamos a utilizar Onsen UI, si no lo conoces, aquí tienes una breve introducción.

Para el que no lo sepa, Onsen UI viene cómo un modulo de AngularJS, es decir, lo podemos inyectar en nuestro modulo para obtener toda la funcionalidad necesaria.

Ahora que sabemos esto, para no empezar completamente desde 0, descarga la template que vamos a utilizar en este tutorial y añade una plataforma, yo le he añadido la de android. Si tienes dudas en este tema visita este tutorial.

Una vez tengas preparada tu zona de trabajo abre el archivo index.html y haz que se parezca a este.

Aquí podemos ver varias cosas, al inicio del documento definimos la directiva ng-app con el nombre de nuestra aplicación(ahora la crearemos).

Después vemos cómo hacemos uso del componente ons-navigator, este nos proporciona gestión de páginas de pila y la navegación.

El componente ons-toolbar se puede utilizar con la navegación.

A continuación tenemos el componente ons-list-item en el cuál utilizamos tanto ng-repeat como ng-click.

Un componente muy importante es ons-template, este acepta un id a través del cuál podemos acceder a su contenido haciendo uso de javascript con ons.navigator.pushPage(‘id’).

Si nos fijamos tenemos un par de controladores y poco más, visto y entendido esto, es un buen momento para ir al archivo js/app.js y reemplazar el contenido por el siguiente.

Simplemente inyectamos el modulo Onsen en nuestra app, creamos un par de controladores y una factoria para devolver algunos datos que mostrar.

Si has seguido todos los pasos correctamente y ejecutas la aplicación verás que puedes moverte entre los elementos sin problemas.

Espero que te haya gustado, y, si tienes cualquier duda sobre AngularJS te invito a que te hagas con el curso ya que aprenderás todo lo que necesitas.