AngularJs/q.js : a manully resolved promise will not trigger the then function

Question

Background: I'ev succesfully integrated angular.js within phonegap 'base' application, the one created from cordova framework itself.

To detected cordova onReady event I created this

angular.module('fsCordova', []).service('CordovaService', ['$document', '$q', 
 function($document, $q) {

    console.log ("fsCordova initialized");

    var d = $q.defer(),
        resolved = false;

    var self = this;
    this.ready = d.promise;

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

      console.log ("deviceready received");
      resolved = true;
      d.resolve(window.cordova);
    });

    // Check to make sure we didn't miss the 
    // event (just in case)
    setTimeout(function() {
      if (!resolved) {
        console.log ("fsCordova timout, deferred resolved manually");
        if (window.cordova) d.resolve(window.cordova);
      }
    }, 3000);
}]);

This my app main js

(function(){

    var app = angular.module('myApp', ['fsCordova']);

    app.controller('MyController', function($scope, CordovaService) {

        $scope.ready = false;
        CordovaService.ready.then(function() {
            console.log ("CordovaService.ready received");
            $scope.ready = true;
        });

    });

})();

What I'm trying to do: thanks to this service, I want to resolve manually the deferred when loading index.html from Google Chrom Browser on Windows 7, thanks to timeout waiting for an event that, on a pc, will never occours.

What is working: I can see fsCordova initialized, I see deviceready received. On a Android emulator and on Android phisical device, I see in adb console even the CordovaService ready received message. So on android all is working

Problem: on a desktop pc, I can see fsCordova initialized, I see deviceready received and I see deferred resolved manually. But I can't see the CordovaService ready received message; $scope.ready = true; was not executed, so, really, I can't test it on my pc.

So, I think that my way to manually resolve the promise on timeout has something wrong.

Please, so, note that problem is NOT cordova. Something goes wrong with q or with angularJs

This is because cordova is meant to work on mobile devices/emulators and not on device. — V31, Jul 17 '14 at 10:50
Have you read my question carefully? I know cordova is not working on desktop, but I use the timeout to resolve manually the promise. So I was thinking I can 'then' then promise. Why not? — realtebo, Jul 17 '14 at 10:54
Wouldn't it be better to manually bootstrap app on `deviceready` event? — maurycy, Jul 17 '14 at 10:57
I dont'k know how to do. Please fill in an answer. But this is NOT the question. The question is WHY MANUALLY RESOLVED PROMISE WILL NOT TRIGGER THE 'THEN' CALLBACK? — realtebo, Jul 17 '14 at 10:58
@realtebo after 2nd look at your code is probably because the event listener is outside of angularjs and you need a $scope.$digest() after resolving the promise — maurycy, Jul 17 '14 at 11:01

realtebo · Accepted Answer · 2014-07-17T13:51:42.780

1

Simply problem was

if (window.cordova) d.resolve(window.cordova);

I fixed changing it to

d.resolve(window.cordova);

Please note the power of my method: you can test your cordova/angularjs app on desktop pc (until you use cordova plugin for device sensors, for example...)

edited Jul 17 '14 at 13:51

answered Jul 17 '14 at 11:02

realtebo

23,922
37
112
189

score 0 · Answer 2 · answered Jul 17 '14 at 10:59

The best solution for this case is to manually bootstrap angular on device ready event:

bootstrapAngular = function () {
  angular.bootstrap(document, ['YourAppName']);
}
document.addEventListener("deviceready", bootstrapAngular, false);

if you want to run angularjs app before device is ready and do some action when it is ready you do it like this

document.addEventListener("deviceready", function(){window.deviceIsReady = true}, false);

then where the action needs to be called:

deviceisready = $watch(function(){ return window.deviceIsReady}, function (status) {
  if (status === true) {
    deviceisready() //will remove the watch
    //device is ready, do some crazy stuff
  }
})

This do not resolve the main problem of have all runinng on desktop — realtebo, Jul 17 '14 at 14:13

AngularJs/q.js : a manully resolved promise will not trigger the then function

2 Answers2