How To Send SMS With Ionic Framework And ngCordova

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post i will show you how to send SMS using Ionic framework with ngCordova. We will be using cordova-sms-plugin.

A thing to note before we begin is that this plugin is capable of just sending messages for Android, iOS and WP8.For Android if you want the ability to read and send messages then you should read my latest post here.

Step 1)

So the first thing we need to do is to create a new ionic Framework project and navigate into our project by the following command, i am using the blank template for this example

 

Step 2)

We will now add the cordova-sms-plugin

 

Step 3)

Now it’s time to add a platform to our app, I will be adding the android paltform.

Note that you will need a Mac computer if you wish to add  and build for the iOS platform.

 

Step 4)

We will be using ngCordova extensions, so we will download a copy of ngCordova Unzip this archive, find a file name called “ng-cordova.min.js”, it should be available at this location “ng-cordova-master\dist\” and place it in our www/lib folder

We will also need to add a reference to the ng-cordova.min.js file in our index.html we will add the reference right above the cordova .js reference

ngCordova also need to be added as a dependency into you app’s module, we do that by adding it in our js/app.js file like so

 

Step 5)

In our index.html we will needs to create our view so inside the black template we add a reference to smsController which we will create in out app.js and then we create out fields that will take a number and a message.

Notice i am binding sms.number and sms.message to number and message fields. we will have access to them using our $scope for the smsController. Also i am binding sendSms() function to ng-click on our send button

Step 6)

Now lets get to the meat of the app and actual code our controller which will handle the SMS sending, we will start off by creating our smsController and injecting two things $scope and $cordovaSms (This is the object that ngCordova provides for us to work with while using the sms plugin)

We are setting $scope.sms to a blank object just so we do not get an “undefined” error.

Now we will set options for the sms plugin like so,

here the replaceLineBreaks parameter takes a Boolean as an argument, if true it will replace \n charecter by a new line, it is false by default.

The next parameter is for android and is a pretty important one if we set intent: ‘INTENT’ then this will open up the defult messaging app in which the number and the message will be pre-filled by our app and the use has to still tap on the send button.

But if we set intent: ‘ ‘ then the SMS will be send in the background.

 

Step 7)

Now lets wire up the send button and actually send the sms we do that the following way,

 

We use the $cordovaSms.send() method to send the sms which gives us a promise that we use in the .then() method

 

Step 8)

The final step is to test our app in an emulator or on a device but first we need to build out app we do that be running the following command

You can run you app by doing the following, but make sure your device has the debugging mode enabled in it.

Or you can also do this

 

And just like that, we can send SMS with Ionic Framework app.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Pingback: What Is ngCordova And How To Use It With Ionic Framework ? - pointDeveloper.com()

  • lorosukmo

    howIcan create listincome sms??

  • Pingback: Ionic 2 Beginner : Send SMS With Ionic 2 And Cordova SMS Plugin - pointDeveloper.com()

  • Neotrixs

    My App crash when use intent: ”

    I’m having some trouble with SMS plugin from ngCordova. If I
    send a message with the intent option set to ‘INTENT’, everything works
    fine, prompting the SMS application installed. But, when I set intent
    to ‘ ‘ (to use android’s native SMS sender), my app crashes. Here’s the
    code:

    $scope.sms = {};
    var options = {
    replaceLineBreaks: false, // true to replace n by a new line, false by default
    android: {
    intent: ” // send SMS with the default SMS app
    }
    };
    $scope.smsSend = function () {
    console.log($scope.sms.phno);
    console.log($scope.sms.msg);
    document.addEventListener(“deviceready”, function () {
    $cordovaSms
    .send($scope.sms.phno, $scope.sms.msg, options)
    .then(function () {
    // Success! SMS was sent
    console.log(‘Success’);
    }, function (error) {
    // An error occurred
    console.log(error);
    }); //then
    });
    };

    ## Testing OS : Marshmallow Android

    • i took a look at your code..It is fine..When i wrote the tutorial i check it on android 5.1 devices.. as you mentioned you tested in on android 6.0 this means that the Android OS has tightened the access of other app in SMS sending…

      You can give this plugin a try https://www.npmjs.com/package/cordova-plugin-sms
      I tried this plugin it does a lot of thing than just send SMSes.
      But the sending SMS function works as well so give it a try.

      -Regards

  • Pingback: how-to-send-an-sms-with-ionic-framework-and-ngcorodva – Eaktadiur's Blog()

  • Prince Lamba

    When i send same meessage to multiple contacts from my app from background means when intent=”” then ,is there is any way to have callback from messanger to my app that message has been sent or not sent to this particular contact .Thanks in Advance

    • Unfortunately no. This is a limitation of the plugin as well as the platform. Android gives limited access to SMS for security reasons. You can keep track by storing an array of numbers in LocalStorage and then not send sms if the number is in the array.

      -Thanks

%d bloggers like this: