Movilizer - Using MovilizerJS with Ionic

Question

I'm trying to use MovilizerJS with the Ionic Framework to create a HTML5 screen. I try to reference te MovilizerJS from within the App.js files generated by Ionic. I added the MovilizerJS files in the plugins folder and added the Cordova.js file containing.

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "plugins/Movilizer.js";
oHead.appendChild(oScript);

It seems though that when i load the HTML5 page inside a browser (or html5 view in the movelet) the MovilizerJS does not get loaded. The following error appears on the browser:

Module 'movilizer' is not available!

Perhaps I need to add this as a Module to the Angular Framework, but when i try to added it to the modules it still gives me errors. My HTML files contains the script-tag for movilizer:

<script src="plugins/Movilizer.js"></script>

My App.js code currently looks like this:

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) { 
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }

      });
    }).factory('MovilizerExtender', function ($rootScope) {
      return {
        startUpMovilizer: function(){
          movilizer.readGlobalVariable("testTable",this.successCallback,this.errorCallback);
        },
        successCallback: function(result){
          $rootScope.routestops = [
            { ontvNaam: 'nice' },
            { ontvNaam: 'it' },
            { ontvNaam: 'is' },
            { ontvNaam: 'working' }
          ];
       },
       errorCallback: function(){
          console.log('failed');
       }
      }
    }).controller("RoutestopCtrl", function($scope, $rootScope, MovilizerExtender) {
      MovilizerExtender.startUpMovilizer();
      $scope.routestops = $rootScope.routestops;

      $rootScope.$watch('routestops', function(){
          $scope.routestops = $rootScope.routestops;
      });
    });

When i directly call the succesCallback method and comment the line: movilizer.readGlobalVariable(...), it no longer tries to access the movilizerJS and the page works. Also note that the Movilizer.js file contains the readGlobalVariable method described in the app.js code. Any help or ideas would be appreciated.

Did you create an instance movilizer of the prototype Movilizer before accessing the readGlobalVariable function of it? The error message sounds as if no instance is present during runtime in the context. For debugging in a browser this should be present in Movilizer.js if I am not mistaken — André Schäfer, Mar 30 '15 at 11:58
I recently was able to get the issue fixed by editing the scripts order in my HTML page, the cordova.js needed to be loaded before my Ionic framework otherwise it wouldn't recognize the movilizer.js for it was not instantiated yet. I did get the movilizerjs working on my desktop browser (chrome, firefox and even IE) though unfortunately it still doesn't seem to work within the movilizer client. Using the Swing debugging client all variables seem to be okay, so i think it's a internal bug in the HTML5 screen. HTML5 errors are not logged in the swing debug client though, so i'm not sure of that — Victor Beersma, Mar 30 '15 at 14:36

score 0 · Answer 1 · answered Feb 11 '16 at 17:55

Try to bootstrap your app instead of using ng-app:

window.onpageshow = ready;
function ready()
{
    var deviceready = new Event("deviceready");
    document.dispatchEvent(deviceready);   
    angular.bootstrap(document, ['starter'], {strictDi: true});  
}

Also, use a promise to wait for movilizer:

 .factory('MovilizerExtender', function ($q, $rootScope) {
    return {
      startUpMovilizer: function(){
        var self = this;
        var defer = $q.defer();

        rootScope.$watch(function(value) {
          return movilizer && movilizer.readGlobalVariable;
        }, function(ready) {
          if(ready) {
            movilizer.readGlobalVariable("testTable",self.successCallback,self.errorCallback);
          }
          defer.resolve(ready);
        });
        return defer.promise;
      },
      successCallback: function(result){
        $rootScope.routestops = [
          { ontvNaam: 'nice' },
          { ontvNaam: 'it' },
          { ontvNaam: 'is' },
          { ontvNaam: 'working' }
        ];
      },
      errorCallback: function(){
        console.log('failed');
      }
    }
  }).controller("RoutestopCtrl", function($scope, $rootScope, MovilizerExtender) {
    MovilizerExtender.startUpMovilizer().then(function(){
      $scope.routestops = $rootScope.routestops;
    });
    $rootScope.$watch('routestops', function(){
      $scope.routestops = $rootScope.routestops;
    });
  });

Movilizer - Using MovilizerJS with Ionic

1 Answers1