Skip to main content

How To Send SMS With Ionic Framework And ngCordova

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. :-)

%d bloggers like this: