Call FCM factory in a controller to get notification data

Question

since last week I'm triying to get notifications from FCM, using Phonegap and AngularJS .

I could do it with cordova-fcm-plugin, so now I would like to get the data from the message, they suggest use this code:

FCMPlugin.onNotification(
  function(data){
    if(data.wasTapped){
      //Notification was received on device tray and tapped by the user.
      alert( JSON.stringify(data) );
    }else{
      //Notification was received in foreground. Maybe the user needs to be notified.
      alert( JSON.stringify(data) );
    }
  },
  function(msg){
    console.log('onNotification callback successfully registered: ' + msg);
  },
  function(err){
    console.log('Error registering onNotification callback: ' + err);
  }
);

My problem was that I have no idea how to added that code to an angular controller, so I searched on internet something similar and I found this factory

    angular.module('rhoAppApp')
       .factory('$FCMPlugin', $FCMPlugin);

        $FCMPlugin.$inject = [];

        function $FCMPlugin() {
            var service = {
                getToken: function(successCallback, failCallback) {
                    FCMPlugin.getToken(successCallback, failCallback);
                },
                onNotification: function(onNotification, onCallbackSuccesSet, onCallbackFailSet) {
                    FCMPlugin.onNotification(onNotification,
                        onCallbackSuccesSet, onCallbackFailSet);
                }
            };
            return service;            

          }

So now my problem is use that factory in my controller, I know (maybe I'm wrong) that you have to call it from:

.controller('MainCtrl', function ($FCMPlugin) {

$FCMPlugin.something

})

But I'm not sure how to use that factory, I have never used one before.

Answer 1

I could solve this problem with this:

I made a build using phonegap + yeoman angular, one of the problem building with this method is that you have to include cordova.js

My problema was, that i include condorva.js inside this line

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->

And it is a problem because you dont want to build it in vendor.js, instead I added cordova.js out of that line:

Then I added this code to app.js to indetify when you are inside of a mobile device or web:

angular.element(document).ready(function () {
    if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) {

      document.addEventListener('deviceready', function () {

       console.log('This is mobile app');

        angular.bootstrap(document.body, ['moodleAppApp']);

      }, false);

    } else {

      console.log('This is web app');

      angular.bootstrap(document.body, ['moodleAppApp']);

    }
  });

Also I remove ng-app from index.html

All this make my angular app work with cordova.