Have you ever wondered how to open an external application with Ionic framework? I have, several times during last few years, and every time I find a workable solution something goes wrong.
I’m writing this article I hope you’ll learn from my mistakes. Unlike my few previous articles covering various Cordova plugins, this one will feature three plugins, so buckle up and let us play.

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

Table of Contents

Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)


Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials



Before we can start make sure you have everything configured correctly.
You will need to have these:
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
In case you don’t have a properly configured development environment take a look at this article: Ionic Framework | Installation Guide.

1. Update Ionic & Cordova

Don’t forget to update Ionic and Cordova, older versions may not work with this tutorial:
npm update -g cordova ionic
If you can’t update them to latest version make sure you have the last NodeJS installation.

2. Create a New Project

ionic start IonicExternalExecDemo blank
cd IonicExternalExecDemo
Warning: Since a few of my readers never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
Now we need to include an appropriate mobile platform; we’re going to add Android platform:
ionic platform add android
if you’re using MacOS, you can also add an iOS platform:
ionic platform add ios

3. Download ngCordova archive

ngCordova is a collection of 63+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. While we can make this work without ngCordova, it’s much more practical this way.
Download ngCordova zip file, here’s site link:
Official Site Docs Download Link
Unzip this archive and find a file named: ng-cordova.min.js, it should be available at this location: ng-cordova-master\dist\.
Open your newly created project directory and copy ng-cordova.min.js to this location: IonicExternalExecDemo\www\js.
Now include this location to index.html located at IonicExternalExecDemo\www; add it above cordova.js file, like this:
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

4. Install necessary Corodva Plugins

Next line will import and install necessary plugins into newly created project:
cordova plugin add com.lampa.startapp
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add org.apache.cordova.device
The first one will be used to check if Twitter application does exist on a smartphone. The second will initialize our links, be it with original Twitter app or inside InApp browser. The third plugin will tell use if we’re running iOS or Android platform.
GitHub - StartApp GitHub - InAppBrowser GitHub - Device
If for whatever reason these plugins are no loner available, find a new location here.


At this point, you should have everything set up and ready, we can start working on our example.
Go to IonicExternalExecDemo project directory and find app.js, alter angular.module line and include ngCordova service, like this:
var app = angular.module('starter', ['ionic', 'ngCordova'])
Open index.html file, add a controller to ion-content directive:
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      <ion-content ng-controller="CheckController">
Initialize this controller in app.js file; don’t forget to inject $cordovaInAppBrowser service, like this:
app.controller('CheckController', function($scope, $cordovaInAppBrowser) {

Because iOS and Android have different rules of app name calling we need to detect which device is running our code:
var scheme;

// Don't forget to add the org.apache.cordova.device plugin!
if(device.platform === 'iOS') {
    scheme = 'twitter://';
else if(device.platform === 'Android') {
    scheme = 'com.twitter.android';
Before we go any further, we need to check if Twitter application (we’re going to use it in this case) exists. If the application does exist we will use it to open our Twitter link, if not we’re going to use InApp browser. You can, of course, use any other application.
    scheme, // URI Scheme
    function() {  // Success callback
        window.open('twitter://user?screen_name=gajotres', '_system', 'location=no');
        console.log('Twitter is available');
    function() {  // Error callback
        window.open('https://twitter.com/gajotres', '_system', 'location=no');
        console.log('Twitter is not available');
Continue Reading