Integración con AngularJS (ngCordova)
La librería ngCordova es una capa de abstracción que permite acceder a los plugins de Cordova (acceder a elementos nativos del dispositivo) muy fácilmente con AngularJS. Este práctico paquete fue desarrollado también por el equipo de Ionic. Por tanto lo aprovecharemos para hacer uso de Cordova en nuestra app Ionic de una manera muy sencilla.
Como antes hemos dicho, un proyecto Ionic es una ampliación de un proyecto básico de Cordova. Por tanto se encuentra ya preparado para gestionar los pluggins y las plataformas con los comandos que hemos visto.
Encapsula la mayoría de plugins que ofrece de manera estándar Cordova, pero continúa ampliando con más cada mes. Nosotros vamos a tratar un par con pequeños ejemplos ilustrativos que haga entender cómo es su dinámica de utilización.
Es conveniente que cualquier llamada a ngCordova se encapsule dentro de un condicional que comprueba que nos encontramos en un dispositivo real.
document.addEventListener("deviceready", function () {
...
}
Esto se realiza para evitar que se intente ejecutar de manera errónea en un navegador por ejemplo, donde no están accesible el device. Ionic proporciona el evento idóneo para controlar estos casos:
$ionicPlatform.ready( function () {
...
}
Cámara
Acceso al periférico de captura de imágenes. Una vez instalado el plugin en la raiz del proyecto con el comando:
cordova plugin add cordova-plugin-camera
Y tras inyectar el módulo en la aplicación de AngularJS. Su uso se simplifica hasta tal punto que sólo tiene el método getPicture(options). Las variable de opciones es un objeto con atributos como la calidad o el formato de la foto resultante.
El uso concreto del método es asícrono, con callback que devuelve la imagen de la forma especificada (en este caso su URI):
var options = {
destinationType: Camera.DestinationType.FILE_URI
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}, function(err) {
// error
});
Geolocalización
Coordenadas GPS del dispositivo. En este caso el plugin que se debe instalar es el siguiente:
cordova plugin add cordova-plugin-geolocation
El módulo en este caso se llama $cordovaGeolocation.
Y los métodos que están a nuestra disposición son tres. El primero y más sencillo getCurrentPosition(options) para consultar las coordenadas en las que se encuentra el dispositivo en el momento de la llamada. Y otros dos para gestionar el seguimientos de esta posición a lo largo del tiempo: watchPosition(options) que inicia el seguimiento indicando cada cuanto tiempo y hasta qué momento; y clearWatch(watchID) que lo detiene.
Hay otros numerosos plugins que se integran con Angular mediante ngCordova, que facilitan acceso a SMS, contactos, calendario, TouchID, HealthKit, al flash de la cámara, el acelerómetro y muchos más. Por tanto ngCordova es una genial idea para cualquier desarrollador de aplicaciones híbridas con AngularJS, y en especial para los empleen tambien Ionic.