# Plugins

## Instalar *ngCordova*

Para instalar *ngCordova* simplemente tenemos que hacer:

```bash
$ bower install ngCordova
```

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

```bash
$ 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):

```markup
<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:

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

## Uso

Añadir un plugin:

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

Ver la lista de plugins instalados:

```bash
$ 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:

```bash
$ 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:

```bash
$ 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:

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

Hay que instalar el siguiente plugin

```bash
$ 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:

```markup
<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:

```bash
$ 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:

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

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

```javascript
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:

```javascript
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);
});
```