Initialize my angularJs App after Phonegap deviceready

Question

I have a phonegap app using AngularJS.

On my app I am using the NetworkStatus plugin to confirm the type of connection the mobile phone is using.

On my root route I am resolving a call to a Service which call DeviceService and it responsbile to access the navigator.network.connection.type and decide if the connection is on or off. the resove send to the controller (through route resolve functionality) a connectionState variable which declare the state of the connection.

On that route I would like to throw an error if Connection is not available.

Having said that, my problem is the the DeviceReady event is fired after my route is accessed. so my route resolve unable to complete the connection verification.

How can I sync up that my angular app will only start after DeviceReady event is fired ?

possible duplicate of [Cordova + Angularjs + Device Ready](http://stackoverflow.com/questions/21556090/cordova-angularjs-device-ready) — user276648, Oct 02 '14 at 02:23

score 25 · Accepted Answer · answered Mar 01 '14 at 23:27

Getting the injector module error from AngularJs usually means that you either mispelled the name of the module or angular simply did not find it.

If the Angular app works properly on its own (e.g when not wrapped in phonegap), this means that this issue is in the order the things happens when your index.html is loaded.

Cordova/PhoneGap loads your index page
Its Webview parses it and loads its scripts tags
If some code is not wrapped in functions or objects, it's executed straight away
Phonegap sends the event deviceready to tell your app that its bridges with native code are ready

The last 2 operations can occur in both orders but most often in the one I gave you. Thus, if you put your angular module name on the html or body tag through ng-app for instance, angular will try loading it when it finds it.

So, for it to work, you need to :

Remove YourAppName from html/body tag
Create your angular module normally (its name must match in bootstrap and module calls)
Use the deviceready event as the trigger to boostrap your application

For example (short example, nothing but css in head) :

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
        {{2+2}}
        </div>
    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function onDeviceReady() {
            angular.bootstrap(document, ['YourAppName']);
        }, false);

        var YourAppName = angular.module('YourAppName', []);
    </script>
</body>

If you want to understand this on your own, I recommend putting some console.log to get the order of things.
You can aslo use Chrome DevTools remote debugging which works pretty well If you have Chrome 32+ on your pc and android 4.4 on phone, or only pc and you debug on emulator. Quite nice to see the errors and stuff. Debugging webviews is a bit strange at first but really useful to trace errors !

Hope this helps

It appears that using this solution does not leave the app in a working state for browsers, though, which can complicate development work. Part of the beauty of PhoneGap / Cordova is that so much of the app development can be done without a device just by using your browser. — Michael Oryl, Dec 12 '14 at 16:11

score 7 · Answer 2 · answered Feb 27 '14 at 22:00

7

You need to do a manual angular.bootstrap (instead of using ng-app):

 deviceReady = function() {
    angular.bootstrap(document, ['app']);
 };
 window.addEventListener('deviceready', deviceReady, false);

answered Feb 27 '14 at 22:00

asgoth

35,552
12
89
98

It throws an exception : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=app&p1=Error%3A%20%…F1.2.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20Error%20(native......2) – Nuno_147 Feb 28 '14 at 08:20
1

The above assumes you have a (main) angular module named 'app', e.g `angular.module('app', ['ngRoute'])`. – asgoth Feb 28 '14 at 08:40

score 5 · Answer 3 · answered Dec 12 '14 at 18:55

I'm using the following solution, which allows AngularJS to be bootstrapped when running with Cordova as well as when running directly in a browser, which is where much of my development takes place. This makes sure that Angular starts up after Cordova/Phonegape is ready, and still ensures that it works when there is no Cordova/PhoneGap at all.

// 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 run into problems with the http/https detection method, due to, perhaps, loading a Cordova app into the phone from the web, you could use the following method instead:

// 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();
}

You would still need the bootstrapAngular function from the first example, of course.

In 'else' (running in browser), I use this code: `angular.element(document).ready(bootstrapAngular);` because my script tags are above ``. — hgoebl, Jul 01 '15 at 09:23

score 0 · Answer 4 · answered Sep 20 '15 at 17:38

0

This method no longer works in iOS 9:

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();
}

answered Sep 20 '15 at 17:38

Byron

309
1
8

Maybe you should use `if( window.cordova ){ ...`. – Morteza Tourani May 07 '16 at 20:49

score 0 · Answer 5 · answered Jun 21 '16 at 12:45

You shouldn't use such workarounds.

"cordova.js" isn't resolved in the browser, thus the "deviceready" event never gets fired. Just call it manually in the browser console for testing.

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

Initialize my angularJs App after Phonegap deviceready

5 Answers5

Linked