How to include and use cordova plugins

Question

I'm struggling with cordova plugins in my ionic app. Been googling whole day, no big win yet.

here's what I'm trying to do - open a web page inside my app with navbar present. I found that cordova-themeable might work that out

...however...

I installed it

$ cordova plugin add cordova-plugin-themeablebrowser

ok, it's present

$ cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.15 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"

now, I'm trying to use it in controller function

$scope.doStuff = function doStuff() {
    cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
        ...

and call it in my .html file

<ion-item ng-click="doStuff()">

I get the following error

ReferenceError: cordova is not defined at Scope.doStuff

in my index.html, I've got

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<script src="js/app.js"></script>

please help, thanks

Answer 1

Can you verify the plugin is in your config.xml?

It should look something like this:

    <plugin name="com.phonegap.plugins.example">
    <param name="APIKey" value="12345678" />
    <param name="APISecret" value="12345678" />
    </plugin>

Answer 2

would have added this as a comment, but not enough rep and only posting as i cant see any mention of any of this.

make sure it is injected properly into your app, given the error or cordova not defined i'm assuming this might be an issue. i couldnt find any specifc references to it, but considering it is built on top of the inappbrowser, i would assume the DI would be $cordovaInAppBrowserProvider.

while reading the docs, from their gitgub FAQ "I just installed this plugin, how come it just shows a blank toolbar?

The purpose of this plugin is to allow you to style the in app browser the way you want. Isn't that why you installed this plugin in the first place? Hence, it does not come with any defaults. Every UI element needs to be styled by you, otherwise it's hidden. This also avoids polluting your resouce bundle with default images."

Answer 3

To add a plugin you are doing right, i.e. if you want to use cordova adomb plugin:

cordova plugin add cordova-admob

Regarding to the error: Are you debugging in browser or in real device? Normally in browser, you should use

cordova platform add browser
phonegap serve

(I recommend you to use phonegap serve insetad of cordova serve as sometimes it works better, but shouldn't make the difference)

Another way to debug apps is to use android remote debug.