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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajgallego.gitbook.io/ionic/plugins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.