Starting AngularJS from the Cordova device ready event without using automatic tools

Question

Starting AngularJS from the Cordova device ready event without using automatic tools

I am currently using Cordova version 3.3.1-0.4.2 along with Angular 1.2.13

My goal is to manually bootstrap Angular once the 'deviceready' event in Cordova is triggered.

During my testing on a Nexus 5 with the command cordova run android, I encountered the same issue while testing on an iPhone.

To simplify the scenario, the JavaScript is running in the overall document scope. The scripts are loaded before the closing </body> tag.

This method works as intended:

angular.bootstrap(document.getElementById("app"), ["MyApp"]);

However, this approach does not work:

function init(){
  angular.bootstrap(document.getElementById("app"), ["MyApp"]);
}

document.addEventListener('deviceready', function () {
  init();
}, true);

Strange enough, if I add alert("init") to the init function, it shows that the function IS being executed. Furthermore, alerts for (angular) and (document.getElementById("app")) confirm their existence.

I find it puzzling why, even though the init() function is being called, it fails when invoked from the EventListener callback but works perfectly when called directly.

Any insights or suggestions on this matter?

javascript angularjs cordova addeventlistener

Answer 1

Answer №1

If you're looking for a reliable solution, one approach I've discovered is to bootstrap Angular in the usual way and then incorporate Cordova as a module that returns a promise. This promise gets resolved once the device is ready.

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

    var defer = $q.defer();

    this.ready = defer.promise;

    // A backup plan in case the event isn't received
    // This was necessary with certain Cordova versions
    // when testing with 'cordova serve' in a browser,
    // but it works correctly on an actual device
    var timeoutPromise = $timeout(function() {
      if ($window.cordova){
        defer.resolve($window.cordova);
      } else {
        defer.reject("Cordova failed to load");
      }     
    }, 1200);

    angular.element($document)[0].addEventListener('deviceready', function() {
      $timeout.cancel(timeoutPromise);
      defer.resolve($window.cordova);
    });  
  }
]);

To use:

angular.module('app', ['fsCordova']).

run(['$window', function($window){
  // Initialize Fastclick
  FastClick.attach(angular.element($window.document.body)[0]);
}]).

controller('AppCtrl', ['$scope', 'CordovaService', 
  function($scope, CordovaService){

    $scope.ready = false;

    // When Cordova is ready
    CordovaService.ready.then(
      function resolved(response) {
         $scope.ready = true;  
      },
      function rejected(response){
        throw new Error(response);
      }
    );
  }
]);

You can find this bootstrapped project here on GitHub

Answer 2

If you're looking for a reliable solution, one approach I've discovered is to bootstrap Angular in the usual way and then incorporate Cordova as a module that returns a promise. This promise gets resolved once the device is ready.

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

    var defer = $q.defer();

    this.ready = defer.promise;

    // A backup plan in case the event isn't received
    // This was necessary with certain Cordova versions
    // when testing with 'cordova serve' in a browser,
    // but it works correctly on an actual device
    var timeoutPromise = $timeout(function() {
      if ($window.cordova){
        defer.resolve($window.cordova);
      } else {
        defer.reject("Cordova failed to load");
      }     
    }, 1200);

    angular.element($document)[0].addEventListener('deviceready', function() {
      $timeout.cancel(timeoutPromise);
      defer.resolve($window.cordova);
    });  
  }
]);

To use:

angular.module('app', ['fsCordova']).

run(['$window', function($window){
  // Initialize Fastclick
  FastClick.attach(angular.element($window.document.body)[0]);
}]).

controller('AppCtrl', ['$scope', 'CordovaService', 
  function($scope, CordovaService){

    $scope.ready = false;

    // When Cordova is ready
    CordovaService.ready.then(
      function resolved(response) {
         $scope.ready = true;  
      },
      function rejected(response){
        throw new Error(response);
      }
    );
  }
]);

You can find this bootstrapped project here on GitHub

Answer 3

Answer №2

If you're looking to manually bootstrap AngularJS after the Cordova deviceready event, here's a helpful approach. You can also find more details on this process here.

'use strict';

var CordovaInit = function() {

var onDeviceReady = function() {
    receivedEvent('deviceready');
};

var receivedEvent = function(event) {
    console.log('Start event received, bootstrapping application setup.');
    angular.bootstrap($('body'), ['c3aApp']); // Manually add and boot AngularJS 
};

this.bindEvents = function() {
    document.addEventListener('deviceready', onDeviceReady, false);
};

//If cordova is present, wait for it to initialize, otherwise just try to
//bootstrap the application.
if (window.cordova !== undefined) {
    console.log('Cordova found, waiting for device.');
    this.bindEvents();
} else {
    console.log('Cordova not found, booting application');
    receivedEvent('manual')
}
};

$(function() {
console.log('Bootstrapping!');
new CordovaInit();
});

I opted for this method because I needed to fetch data from SQLite db on the device for AngularJS configuration before loading AngularJS, as loading AngularJS first was causing issues in my code.

Having used this method for some time now, everything runs smoothly.

// PLEASE DO CHECK THE ORDER OF YOUR .js FILES.

Answer 4

If you're looking to manually bootstrap AngularJS after the Cordova deviceready event, here's a helpful approach. You can also find more details on this process here.

'use strict';

var CordovaInit = function() {

var onDeviceReady = function() {
    receivedEvent('deviceready');
};

var receivedEvent = function(event) {
    console.log('Start event received, bootstrapping application setup.');
    angular.bootstrap($('body'), ['c3aApp']); // Manually add and boot AngularJS 
};

this.bindEvents = function() {
    document.addEventListener('deviceready', onDeviceReady, false);
};

//If cordova is present, wait for it to initialize, otherwise just try to
//bootstrap the application.
if (window.cordova !== undefined) {
    console.log('Cordova found, waiting for device.');
    this.bindEvents();
} else {
    console.log('Cordova not found, booting application');
    receivedEvent('manual')
}
};

$(function() {
console.log('Bootstrapping!');
new CordovaInit();
});

I opted for this method because I needed to fetch data from SQLite db on the device for AngularJS configuration before loading AngularJS, as loading AngularJS first was causing issues in my code.

Having used this method for some time now, everything runs smoothly.

// PLEASE DO CHECK THE ORDER OF YOUR .js FILES.

Answer 5

Answer №3

As per the Cordova deviceready documentation, it is recommended to listen for the deviceready event within the onLoad event
You might be encountering a problem with the order of JavaScript libraries

I have shared a solution that I developed which does not rely on deferred initialization using promises. This solution has been thoroughly tested and proven to work consistently on various emulators as well as physical iOS and Android devices. You can find more details about this on my blog.

Answer 6

As per the Cordova deviceready documentation, it is recommended to listen for the deviceready event within the onLoad event
You might be encountering a problem with the order of JavaScript libraries

I have shared a solution that I developed which does not rely on deferred initialization using promises. This solution has been thoroughly tested and proven to work consistently on various emulators as well as physical iOS and Android devices. You can find more details about this on my blog.

Starting AngularJS from the Cordova device ready event without using automatic tools

Answer №1

Answer №2

Answer №3

Similar questions

Guide on sending a JSON object to an EJS javascript loop efficiently

Obtain an array containing both matching and non-matching elements

Does angularjs have the capability to filter content using keywords?

Comparison of performance between Bluebird's promisify and promisifyAll when needing to convert a single method from a module into a Promise

Strategies for enhancing jQuery performance using the find() method

Issue with Magento site: Clicking on thumbnail photo does not update the large photo on mobile devices

What is the correct method for embedding a javascript variable into a Twig path?

How can I adjust the dimensions of a radar chart in react-apexchart to make it larger or smaller?

Trouble encountered during the installation of Ionic

Error: self has not been declared

Can you create an HTML page that does not include any images, screenshots, or descriptions?

Transfer all files to a different computer on the local area network using Grunt

Comparing AngularJS $http with $http.post: A Detailed Analysis

A guide on how to activate an event when a radio button is selected using jQuery

Exploring AngularJS with $crypto and ng-options

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

Sending a request to a JSON file using Ajax

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

How can I determine if an npm package requires publishing before actually performing the publish process?