Plugins

Instalar ngCordova

Para instalar ngCordova simplemente tenemos que hacer:

$ bower install ngCordova

Si nos diese algún error de permisos tendríamos que ejecutar:

$ sudo bower install ngCordova --allow-root

A continuación tenemos que incluir "ng-cordova.js" o "ng-cordova.min.js" en el fichero index.html justo antes de cordova.js y después de incluir AngularJS e Ionic (ya que ngCordova depende de AngularJS):

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Para usarlo tenemos que inyectarlo en el módulo como una dependencia de Angular, por ejemplo:

angular.module('myApp', ['ngCordova'])

Uso

Añadir un plugin:

$ ionic plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Ver la lista de plugins instalados:

$ cordova plugin list

Para eliminar usamos plugin remove con el nombre del plugin a eliminar. Este nombre puede no ser el mismo que el que usamos para instalar, así que lo tenemos que consultar usando: cordova plugin list. Y por último lo eliminamos de la forma:

$ ionic plugin remove nl.x-services.plugins.toast

A veces después de instalar un plugin (como el de sqlite) no se instala todo lo necesario en la plataforma. Por lo que se recomienda hacer:

$ ionic platform rm [ios/android]
$ ionic platform add [ios/android]

Para más información podéis consultar:

http://ngcordova.com/docs/plugins/

Whitelist

Si aparece el error:

No Content-Security-Policy meta tag found. 
Please add one when using the cordova-plugin-whitelist plugin.

Hay que instalar el siguiente plugin

$ ionic plugin add cordova-plugin-whitelist

Si se van a hacer peticiones de contenido a un servidor externo hay que definir la politica de seguridad añadiendo a la cabecera de la página la siguiente directiva:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Para más información podéis consultar:

https://github.com/apache/cordova-plugin-whitelist#content-security-policy

Toast

Por ejemplo, para usar el plugin para mostrar un toast tenemos que instalar:

$ ionic plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Más información en: http://ngcordova.com/docs/plugins/toast/

SQLite

Por ejemplo para usar el plugin para trabajar con SQLite instalamos:

$ ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git

A continuación se incluye un ejemplo de uso desde un controlador:

module.controller('MyCtrl', function($scope, $cordovaSQLite) {

  var db = $cordovaSQLite.openDB({ name: "my.db" });

  // for opening a background db:
  //var db = $cordovaSQLite.openDB({ name: "my.db", bgType: 1 });

  $scope.execute = function() {
    var query = "INSERT INTO test_table (data, data_num) VALUES (?,?)";
    $cordovaSQLite.execute(db, query, ["test", 100]).then(function(res) {
      console.log("insertId: " + res.insertId);
    }, function (err) {
      console.error(err);
    });
  };

});

Más información en: http://ngcordova.com/docs/plugins/sqlite/

Errores comunes

Todas las llamadas a plugins o eventos de Cordova tienen que esperar a que se cargue la librería. Para esto en primer lugar hay que escuchar el evento deviceready de la forma:

document.addEventListener("deviceready", function () 
{
    // Ya podemos usarlo...
    $cordovaPlugin.someFunction().then(success, error);
}, false);

// O también podemos esperar al evento usando el código: 

$ionicPlatform.ready(function() {
    // Ya podemos usarlo...
    $cordovaPlugin.someFunction().then(success, error);
});