Movilizer - Using MovilizerJS with Ionic

Question

I am trying to use MovilizerJS with the Ionic Framework to create an HTML5 screen. I am trying to reference te MovilizerJS from the App.js files generated by Ionic. I added MovilizerJS files to 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 that when loading an HTML5 page inside a browser (or viewing html5 in a move) MovilizerJS does not load. The following error appears in the browser:

The "movilizer" module is not available!

Maybe I need to add this as a module in the Angular Framework, but when I try to add it to the modules, it still gives me errors. My HTML files contain a script -tag for movilizer:

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

Currently, my App.js code is as follows:

 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 out the line: movilizer.readGlobalVariable (...), it no longer tries to access movilizerJS, and the page is working. Also note that the Movilizer.js file contains the readGlobalVariable method described in the app.js code. Any help or ideas would be appreciated.

Answer 1

Try downloading the application 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 the 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; }); });