In one of my previous articles, I made a list of useful Ionic plugins and add-ons. This list was intentionally missing Cordova based plugins, mainly because I was trying to separate pure JavaScript/AngularJS plugins from the rest of them. What previous article was missing this one is going to correct.
 
I will list only useful plugins applicable to any Ionic application though some of them (like NFC plugin) will be limited to specific mobile platform. Every plugin will have a link leading to plugin specific tutorial; if such don’t exist I will write it myself.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
Note: This article will not talk about classic Ionic plugins and directives, they are covered in a separate article.
 

Table of Contents

 
  1. Whitelist Plugin
  2. Ionic Keyboard Plugin
  3. File Transfer Plugin
  4. File API Plugin
  5. Clipboard Plugin
  6. Contacts Plugin
  7. Camera Plugin
  8. SMS Plugin
  9. Barcode Scanner Plugin
  10. InApp Browser Plugin
  11. Geolocation Plugin
  12. Splash Screen Plugin
  13. Calendar Plugin
  14. Audio Plugin
  15. Video Plugin
  16. Network Information Plugin
  17. iOS Touch Id Plugin
  18. SQLite Storage Plugin
  19. Screen Orientation Plugin
  20. In-App Purchases Plugin
  21. New
    AdMob Plugin
  22. New
    Native Page Transitions
  23. New
    Device Motion
  24. New
    Network Interface
  25. New
    Image Picker
  26. New
    Local Notifications
  27. New
    File Opener 2
  28. New
    Action Sheet, Modal, Dialogs
 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...
 
 
Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.
 
There’s a good reason this plugin is listed as a number one. If an application is, via webview directly, using any external network requests (images, XHRs, etc) it will fail if that service URL is not whitelisted.
 
Requires Cordova
  • Version: 4.0 +
Supported Platforms
  • iOS
  • Android
Tutorial GitHub
 
 
 
The cordova.plugins.Keyboard object provides functions to make interacting with the keyboard easier, and fires events to indicate that the keyboard will hide/show.
 
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone
Code Example
 
cordova.plugins.Keyboard.disableScroll(true);
cordova.plugins.Keyboard.disableScroll(false);

cordova.plugins.Keyboard.show();

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    alert('Keyboard height is: ' + e.keyboardHeight);
}

window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    alert('Goodnight, sweet prince');
}
 
Tutorial GitHub
 
 
 
Simple as it is, this plugin allows you to upload and download files. It works on all major mobile platforms including Amazon Fire OS and Blackberry OS.
 
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone 7 and 8
  • Browser
  • Windows
  • Windows 8
  • Firefox OS
  • Amazon Fire OS
Code Example
 
// !! Assumes variable fileURL contains a valid URL to a text file on the device,
//    for example, cdvfile://localhost/persistent/path/to/file.txt

var win = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

var fail = function (error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

var params = {};
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);
 
Tutorial GitHub
 
 
 
Where previously mentioned plugin shines in remote file transfer actions we still need a plugin to access our local file system. cordova-plugin-file is precisely what we need to access device local storage.
 
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone 7 and 8
  • Browser
  • Windows
  • Windows 8
  • Firefox OS
  • Amazon Fire OS
Code Example
 
document.addEventListener("deviceready", init, false);
function init() {	
        window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + "www/index.html", gotFile, fail);
}

function fail(e) {
	console.log("FileSystem Error");
	console.dir(e);
}

function gotFile(fileEntry) {

	fileEntry.file(function(file) {
		var reader = new FileReader();

		reader.onloadend = function(e) {
			console.log("Text is: "+this.result);
			document.querySelector("#textArea").innerHTML = this.result;
		}

		reader.readAsText(file);
	});

}
 
Tutorial GitHub
 
 
 
While not important like his big brother (File API Plugin) Clipboard plugin is a feature you should not miss.
 
This plugin works on these mobile platforms: iOS, Android, and Windows and it supports only textual content.
 
Supported Platforms
  • iOS
  • Android
  • Windows Phone 7 and 8
Code Example
 
var text = "Hello World!";

cordova.plugins.clipboard.copy(text);

cordova.plugins.clipboard.paste(function (text) { alert(text); });
 
Tutorial GitHub
 
 
 
This not so simple plugin defines a global navigator.contacts object, which provides access to the device contacts database.
 
Requires Cordova
  • Version: 5.0 +
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone 8
  • Firefox OS
Code Example
 
function onSuccess(contacts) {
    alert('Found ' + contacts.length + ' contacts.');
};

function onError(contactError) {
    alert('onError!');
};

// find all contacts with 'Bob' in any name field
var options      = new ContactFindOptions();
options.filter   = "Bob";
options.multiple = true;
options.desiredFields = [navigator.contacts.fieldType.id];
options.hasPhoneNumber = true;
var fields       = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
navigator.contacts.find(fields, onSuccess, onError, options);
 
Tutorial GitHub
 
 
 
Do you want to take a photo and do something with it? Then this is a plugin for you.
 
This plugin defines a global navigator.camera object, which provides an API for taking pictures and for choosing images from the system’s image library.
 
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows 8
  • Browser
  • Windows
  • Ubuntu
  • Firefox OS
  • Amazon Fire OS
Code Example
 
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}
 
Tutorial GitHub
 
 
 
Cross-platform plugin for Cordova / PhoneGap to easily send SMS. Available for Android, iOS, and Windows Phone 8.
 
Requires Cordova
  • Version: 3.0 +
Supported Platforms
  • iOS
  • Android
  • Windows Phone 8
Code Example
 
var app = {
    sendSms: function() {
        var number = document.getElementById('numberTxt').value;
        var message = document.getElementById('messageTxt').value;
        alert(number);
        alert(message);

        //CONFIGURATION
        var options = {
            replaceLineBreaks: false, // true to replace \n by a new line, false by default
            android: {
                intent: 'INTENT'  // send SMS with the native android SMS messaging
                //intent: '' // send SMS without open any other app
            }
        };

        var success = function () { alert('Message sent successfully'); };
        var error = function (e) { alert('Message Failed:' + e); };
        sms.send(number, message, options, success, error);
    }
};
 
Tutorial GitHub
 
 
 
This plugin is an open-source, multi-format 1D/2D barcode image processing multiplatform library made for PhoneGap and Cordova.
 
Supported Platforms
  • iOS
  • Android
  • Windows Phone 8
  • Browser
  • Windows 8
Code Example
 
 cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );
 
GitHub
 
 
 
As it names clearly states, this plugin provides a web browser view that can be called (for whatever reason) directly from your application.
 
Supported Platforms
  • iOS
  • Android
  • BlackBerry 10
  • Windows Phone 7 & 8
  • Browser
  • Windows 8 & 8.1
  • Firefox OS
  • Amazon Fire OS
Code Example
 
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
}
 
Tutorial GitHub
 
 
Continue Reading