Have you ever wanted to programmatically send an SMS? Who cares, this technology is no longer important. But if yous till need to do so here’s how you can do this with Ionic Framework and Cordova.
 
 

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.


 

Table of Contents

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

Tutorials

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

Cordova Plugin Tutorials

 

Preparation

 
Make sure you have these requirements:
 
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
If you don’t have a previous Ionic Framework experience you can find more information here: Ionic Framework | Installation Guide.
 

1. Update Ionic & Cordova

 
The latest nodeJs version is a top priority, you can’t download/update proper Ionic Framework version without it.
 
After nodeJS, update Ionic, and Cordova, older versions may not work with this tutorial:
 
npm update -g cordova ionic
 

2. Create a New Project

 
ionic start IonicSendSMSDemo blank
cd IonicSendSMSDemo
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Android platform is required for this example:
 
ionic platform add android
 
MacOS users can also add 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. This collection also holds many Ionic Framework compatible plugins.
 
Download ngCordova zip file, here’s site link:
 
Official Site Docs Download Link
 
 
Unzip this archive, find a file name called: 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: IonicSendSMSDemo\www\js.
 
Now include this location to index.html located at IonicSendSMSDemo\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 Cordova SMS plugin

 
Next line will import and install necessary plugins into newly created project:
 
cordova plugin add https://github.com/cordova-sms/cordova-sms-plugin.git
cordova plugin add cordova-plugin-whitelist
 
If you’re using Cordova 5.0.0 you will already have preinstalled Whitelist plugin.
 
We also need Cordova File plugin so we can access device file system.
 
GitHub - SMS GitHub - Whitelist
 
 

Development

 
At this point, you should have everything set up and ready, we can start working on our example.
 
Go to IonicSendSMSDemo 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-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">SMS Example</h1>
      </ion-header-bar>
      <ion-content ng-controller="SMSController">
      </ion-content>
    </ion-pane>
 
Initialize this controller in app.js file; don’t forget to inject $cordovaSms service, like this:
 
app.controller('SMSController', function($scope, $cordovaSms) {

});
 
Now we need to initialize Whitelist plugin; add this meta tag to index.html HEAD content:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 
We will use next function to send an SMS, don’t forget to wrap it into Cordova deviceready event (or Ionic ready depending on your project):
 
  document.addEventListener("deviceready", function() {

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

    $scope.sendSMS = function() {

      $cordovaSms
        .send('0959052082', 'This is some dummy text', options)
        .then(function() {
          alert('Success');
          // Success! SMS was sent
        }, function(error) {
          alert('Error');
          // An error occurred
        });
    }
  });
 
options object is important here. The first parameter (replaceLineBreaks) is boolean which defines should message use a “\n” or not, false is a default one. The second parameter defines if our application should send SMS directly or via default SMS application. If default application is selected then you will need to manually press Send button. Both parameters are described in example comments.
 
Continue Reading