How to integrate Cordova/Phonegap plugins within Angular/Ionic the right way?

ionic-v1
21

@ajbraus This was posted before the NG-Cordova project was launched. The Push plugin is now also supported by NG-Cordova, so I would recommend looking into that instead of the information in this thread.

22

Are there more docs?

23

For NG-Cordova? Or the Push plugin?

24

Both and how to use Cordova into Ionic without ng-cordova.

25

The Push plugin has reasonably good documentation available on it’s Github page:

NG-Cordova has a whole site dedicated to it:
http://ngcordova.com/docs/

You can use Cordova plugins by installing them into your project with the CLI, then adding the required .js files to the <head> of your index.html, and then calling functions from the plugin in either your controller, factory or directive. You can only test them on simulator or device, as by their nature Cordova plugins enable device functions that aren’t available in the browser.

26

Hey @max, I want to install and use a third party plugin also
As you suggest will the following do?

angular.module('myModule', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    var telephoneNumber = window.plugins.telephonenumber;
    telephoneNumber.get(function(result) {
        //result
    }, function() {
        //error
    });
  });
});
27

Yes, $cordovaPush can be used to register for notifications. But everything i have seen uses a global function outside of angular – there is nothing on how you get angular to receive those push messages?

The most obvious thing you would want to do is to be able to receive push messages within a controller and do stuff based on them. Like when a push message comes in you could do $scope.lastMessage = event.payload.message. But i don’t see any way in the documentation that you can hook in to incoming push messages inside angular? I am surprised this hasn’t been brought up before?

28

I am using $cordovaPush , the registration is working successfully, however I am unable to set the notification when the app is working in foreground.

Can I get some help with the code for iOS

1 Like
29

For the Cordova Push plugin’s return message (that contains the registrationId), I’ve found that I can get the “ecb” (event callback function) to be handled inside Angular - inside a service even.

My android configuration looks like this:
var androidConfig = {
“senderID”: “123456”,
“ecb”:“angular.element(document.querySelector(’*[ng-app]’)).injector().get(‘MyService’).onNotification”
};

Basically the “ecb” is of the perspective from outside of angular. It would be similar if you were trying to access an angular service from the Chrome Dev Tools command line (outside of angular). The code: “angular.element(document.querySelector(’*[ng-app]’)).injector().get(‘MyService’).onNotification” is a chained methed that grabs angular from the global scope, finds the element that contains the “ng-app” attribute, gets an angular injector, then uses that injector to find “MyService”. Once we have “MyService”, then we call a function on the service.

The “onNotification” function in the service can look something like this:
onNotification : function(e) { console.log(e.regid); }

But the question still remains, how do I update a $scope variable in the controller when I register a push id? For that, I created an Observer Pattern in the same “MyService” service so that when “onNotification” is called, the observing functions all get called as well. So if your controller registers an observing function (that sets a $scope variable) with “MyService”, when “onNotification” gets called as an ecb, your controllers observing function will get called when the ecb finishes.

Here is an SO link to how to create an Observer pattern in Angular to watch service variables: http://stackoverflow.com/a/17558885

2 Likes
30

Hi Aaron,
You’ve probably found your solution, but for others coming to this thread, I just posted my solution to what you describe near the end of this thread.

31

Hey how you fix the code i am facing the same problem?

32

I ended up using ngCordova (http://ngcordova.com/docs/plugins/pushNotifications/). In my case, I $broadcast an event to update application state. But be careful: examples are very poor, syntax errors and logical failures …

33

Anyone ever encountered that issue?? Can’t figure out what is wrong :frowning: I installed all the cordova depedencies and my ngCordova is loaded properly since I use it for other stuff

processMessage failed: Message: Jjavascript:angular.element(document.querySelector('[ng-app]')).injector().get('$cordovaPush').onNotification({"event":"registered","regid":"AP234APArew324PflewlfewlfeETC ETC ETC..."}) cordova.js:1061
processMessage failed: Error: TypeError: Cannot read property 'get' of undefined cordova.js:1059

So frustrating and I’m receiving the correct regid

34

Hi,
I am trying to implement push notification using ngCordova plugin ngCordova push notification plugin

var androidConfig = {
“senderID”: “replace_with_sender_id”,
};

from where will I get senderID ?

thanks in advance

35

From your Google Play console

36

thanks for replay.

I have got senderID and configured it properly now I am getting token Id on registration.

but when I sent notification from serverside it shows success on serverside but I am not able to get the notification in app.

37

getting the same error have you got the solution.