Ionic - Plugin Load Notification

[jdelibas]

Im using Ionic and have created an angularjs service with the nfc plugin functions.

The problem is that the Ionic loads before the NFC plugin does and when it tries to create the angular service which contains the nfc.addMimeTypeListener function it throws an undefined error because the plugin still hasnt loaded.

This is what the cordova log looks like

D/CordovaLog( 8090): file:///android_asset/www/index.html: Line 46 : Cordova Device Ready
D/CordovaLog( 8090): file:///android_asset/www/scripts/app.js: Line 18 : Ionic Device Ready
D/CordovaLog( 8090): file:///android_asset/www/scripts/services.js: Line 16 : NFC Service Starting
D/CordovaLog( 8090): file:///android_asset/www/bower_components/angular/angular.js: Line 9778 : TypeError: Cannot call method 'addMimeTypeListener' of undefined
D/CordovaLog( 8090): file:///android_asset/www/plugins/com.chariotsolutions.nfc.plugin/www/phonegap-nfc.js: Line 18 : Initialized the NfcPlugin

As you can see from the log

1. Cordova's ready event fires
2. Ionics ready event fires
3. The NFCservice I have written fires
4. THEN the plugin init fires

If there was a custom event in handleNfcFromIntentFilter() where the console.log() is then the plugin load could be confirmed like so

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

    console.log("Cordova Device Ready");

    document.addEventListener("phonegap-nfcready", function() {

           console.log("phonegap-nfc Plugin Ready");
           //Load nfc dependents here

    }, false);

}, false);

[don]

The current plugin initialization is pretty kludgy. I think there's a better way with Cordova 3.x but I need to look into it more.

For now, see if you can patch phonegap-nfc.js. Fire an event in the success callback for init()

https://github.com/chariotsolutions/phonegap-nfc/blob/37b3b7d7d955d6566e05d7ca214712049fcc47fc/www/phonegap-nfc.js#L18

If that works for you, send a pull request

[export-mike]

Hey any progress on this? Don's suggestion help?

[don]

@mikeljames I'm using phonegap-nfc with iconic without modification

I create an NFC service that I inject into the main controller so NFC works on every page. I think the $iconicPlatform.ready implementation has changed since @jdelibas submitted this issue.

angular.module('services', [])

    .factory('nfcService', function ($rootScope, $ionicPlatform) {

        $ionicPlatform.ready(function () {

            var onNfc = function (nfcEvent) {

                // read or write NFC tag here

            };

            // Listen for NDEF tags
            nfc.addNdefListener(
                onNfc,
                function () {
                    console.log("Listening for NDEF tags.");
                },
                function (error) {
                    console.log("addNdefListener: " + error)
                }
            );

        });

    });

[gdpfran]

@don , i am newbie in Ionic, I tried to use your example in my project but i can´t do that. Is it possible to create an codepen or jsfiddle example and share with us?

Thanks.

[export-mike]

Hi Don thanks for this. I have since created something very similar. I'll give your one a try. My example below is likely to change. At the moment the requirement is just to read a tag.

` angular.module('angular-ionic-nfc',['ionic']) .factory('NfcService', ['$window', '$q', '$rootScope', '$ionicPlatform', function($window, $q, $scope, $ionicPlatform){ var onTouch = function(){

        var deferred = $q.defer();

        $ionicPlatform.ready(function(){
            if($window.nfc){
                $window.nfc.addNdefListener(function(){
                    deferred.resolve(event.tag);
                }, function(){
                    deferred.notify('added listner for NFC');
                }, function(){
                    deferred.reject('failed to attach NFC event handler');
                });             
            }else{
                deferred.reject('NFC Global Object does not exist');
            }

        });

        return deferred.promise;
    };

    return {
        onTouch: onTouch
    };
}]);`

[gdpfran]

@mikeljames thank you for sharing, how do you call the factory in a controller?

Is it possible share how to add the NFC plugin in the project.

I am very newbie..... :(

[don]

I'd like to create an Ionic NFC example but I haven't had time yet. In the meantime you could checkout this very simple Angular NFC project

[export-mike]

@gdpfran to use the factory/service within your controller firstly import the module to your app.

angular.module('someapp',['dependencyOnModule1','someapp.controllers', 'angular-ionic-nfc']).config(...

angular.module('someapp.controllers', function(NfcService){
 NfcService.onTouch().then(function(data){

}, function(error){
}, function(update){
});
});

I have been refactoring this sample, I may have time to push this out as a gist later today

[don]

Here's an example app using Ionic and phonegap-nfc https://github.com/don/ionic-nfc-reader

[konstantinkrassmann]

Maybe this is helpful:

https://github.com/konstantinkrassmann/ngCordova-nfc