How to Launch External Application With Ionic Framework

Written by on July 27, 2015

How to Launch External Application With Ionic Framework

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 Thanks and have a nice day!

Table of Contents

[spoiler title=” 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
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 = '';

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'twitter://user?screen_name=gajotres', '_system', 'location=no');
        console.log('Twitter is available');
    function() {  // Error callback'', '_system', 'location=no');
        console.log('Twitter is not available');
Continue Reading


12 thoughts on “How to Launch External Application With Ionic Framework”

    • $scope.printer = function () {


      navigator.startApp.start([[“com.example.possdkforandroid”, “com.example.possdkforandroid.MainActivity”, “com.example.possdkforandroid.PrintTextActivity”], [{

      “Text_data”: “helo”

      }]], function (message) {

      /* success */



      function (error) { /* error */





      above mentioned is correct?

      and how can i receive that parameter on android app

  1. please describe step-4

    is this command need to run in terminal.?

    or add to .html or .js file

    sorry i am new in ionic

  2. I have email and mobile numbers in my application so I want to open that in individual app like calling app and Gmail. How can I do that?

Leave a Reply