Best IT Recipes

Cordova + Angularjs + The device is ready

I am developing a mobile application using Cordova and AngularJS. How to limit the download of AngluarJS to the availability of the Cordova device. Basically, I don't want to use any AngularJS controllers before the device is ready.

+52
angularjs angularjs-service cordova
Feb 04 '14 at 15:09
source share
6 answers

In a manual bootstrand you have an Angular app:

Remove the ng-app attribute from your HTML code, so Angular does not start by itself.

Add something like this to your JavaScript code:

 document.addEventListener("deviceready", function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(...) / document.querySelector(...); angular.bootstrap(domElement, ["angularAppName"]); }, false);

Angular for boot applications .

+83
Feb 04 '14 at 15:24
source share

I use the following solution, which allows AngularJS to load when working with Cordova, as well as when starting directly in the browser , where most of my development takes place. You need to remove the ng-app directive from the index.html main page since manual download is replaced.

UPDATE: Since then, I have moved on to the next method, which, in my opinion, is cleaner. It works with both ionic and vanilla cordovas / PhoneGap. This should be the last bit of JavaScript to run - perhaps inside the script tag before the / body tag.

  angular.element(document).ready(function () { if (window.cordova) { console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires."); document.addEventListener('deviceready', function () { console.log("Deviceready event has fired, bootstrapping AngularJS."); angular.bootstrap(document.body, ['app']); }, false); } else { console.log("Running in browser, bootstrapping AngularJS now."); angular.bootstrap(document.body, ['app']); } });

Here's the older solution I used:

 // This is a function that bootstraps AngularJS, which is called from later code function bootstrapAngular() { console.log("Bootstrapping AngularJS"); // This assumes your app is named "app" and is on the body tag: <body ng-app="app"> // Change the selector from "body" to whatever you need var domElement = document.querySelector('body'); // Change the application name from "app" if needed angular.bootstrap(domElement, ['app']); } // This is my preferred Cordova detection method, as it doesn't require updating. if (document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1) { console.log("URL: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("URL: Running in browser"); bootstrapAngular(); }

If you are having problems with the http / https detection method, due to possibly downloading the Cordova application to your phone from the Internet, you can use the following method:

 function bootstrapAngular() { console.log("Bootstrapping AngularJS"); // This assumes your app is named "app" and is on the body tag: <body ng-app="app"> // Change the selector from "body" to whatever you need var domElement = document.querySelector('body'); // Change the application name from "app" if needed angular.bootstrap(domElement, ['app']); } // This method of user agent detection also works, though it means you might have to maintain this UA list if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) { console.log("UA: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("UA: Running in browser"); bootstrapAngular(); }

Note that you still need the same bootstrapAngular function from the first example.

Why manually bootstrap AngularJS with Cordova / PhoneGap / Ionic?

Some people who come here may not know why you would like to do this in the first place. The problem is that you may have AngularJS code that uses Cordova / PhoneGap / Ionic plugins and these plugins will not be ready until AngularJS starts, because Cordoba needs more time to get up and work on the device than the plain old Javascript code for AngularJS does.

So, in these cases, we need to wait until Cordova / PhoneGap / Ionic is ready before launching (self-tuning) AngularJS, so that Angular will have everything you need to run.

For example, let's say you use the NG-Persist Angular module, which uses local storage to save data in the browser, the iOS Keychain plugin when running on iOS, and the cordova-plugin-file when running on Android. If your Angular application tries to download / save something right off the bat, NG-Persist checking on window.device.platform (from the device plugin ) will fail, because the mobile code has not yet completed launch, and instead of your beautiful application, you will get white page only.

+64
Dec 12 '14 at 18:44
source share

If you are using Ionic , this solution works for browsers and devices. Sign romgar in this thread.

 window.ionic.Platform.ready(function() { angular.bootstrap(document, ['<your_main_app']); });

You still need to remove the ng application from your DOM element.

+30
Jan 16 '15 at 0:53
source share

This solution became more reliable when I used:

 angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); });

UPDATE

My suggestion was to put the above in the appropriate deviceready function, for example:

 document.addEventListener("deviceready", function() { angular.element(document).ready(function () { var domElement = document.getElementById('appElement'); angular.bootstrap(domElement, ["angularAppName"]); }); }, false);
+5
Jun 29 '14 at 18:01
source share

When using a solution from TheHippo:

 document.addEventListener("deviceready", function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(...) / document.querySelector(...); angular.bootstrap(domElement, ["angularAppName"]); }, false);

This does not work in a browser because cordova.js is enabled by the Cordoba or Phonegap build process and is not available in your local or emulated test environment.

Thus, the "deviceready" event never fires. You can simply launch it manually in the browser console.

 var customDeviceReadyEvent = new Event('deviceready'); document.dispatchEvent(customDeviceReadyEvent);

Also make sure that the angular boot bot starts after you install all of you angular modules / controllers / factories / directives, etc.

+2
Jun 21 '16 at 12:40
source share

In most cases, you probably do not need to block the loading of your angular application until deviceready (remember that it may take a few seconds to start deviceready if you have many plugins).

Instead, you can use something like this lib ( https://github.com/arnesson/angular-cordova ) that solves the problems with deviceready for you by automatically buffering calls, and then execute them after deviceready has been fired .

0
Jun 21 '16 at 20:39
source share


More articles:


All Articles