How to declare device ready in angular js

Question

Have an app.js file, but not getting where to exactly include the device ready method.

Can any one please help me out.

App.js:

var app = angular.module('myApp',[
'ngRoute'
]).config([]).run().directive();

Where do I need to insert on device ready method exactly.

@Satpal: I have some conditions which should get executed once the device i.e. ipad is ready. Can you please just keep an alert and help me out. — user1853128, Jul 02 '14 at 11:50
possible duplicate of [Initialize my angularJs App after Phonegap deviceready](http://stackoverflow.com/questions/22081180/initialize-my-angularjs-app-after-phonegap-deviceready) — Jscti, Jul 02 '14 at 11:54

Satpal · Accepted Answer · 2014-07-02T12:11:14.287

1

You can manually bootstap your angular application, remove ng-app attribute from your HTML which will prevent Angular from starting.

Add code to bootstrap your angular app

document.addEventListener("deviceready", function() {

    //Your code

    // Find the DOM element where you want to add ng-app
    var element = document.querySelector(...); 

    angular.bootstrap(element, "YourAppName"); //Or simple document in place of element
}, false);

Also read

edited Jul 02 '14 at 12:11

answered Jul 02 '14 at 11:55

Satpal

132,252
13
159
168

I have ng-app to html tag .. Now What I need to give in document.querySelector(); do I need to use html or mApp in that place – user1853128 Jul 02 '14 at 12:05
@user1853128, Just use `angular.bootstrap(document, "YourAppName");`, if you want to select HTML tag then use `var element = document.querySelector('html'); ` – Satpal Jul 02 '14 at 12:08
I have follow the steps and added the same in my app.js but the alert is not at all coming. and there is no error in my console. IF am removing , ng-app from my html, then the page is not at all loading.... because based on appId all the page is designed and developed. Now how to I achieve this? document.addEventListener("deviceready", function() { alert('hai'); angular.bootstrap(document, "myApp"); }, false); – user1853128 Jul 02 '14 at 12:17
@user1853128, Go through http://stackoverflow.com/questions/21842276/manually-bootstrapping-angularjs-from-cordova-deviceready-event accepted answer is quite good. – Satpal Jul 02 '14 at 12:18
@user1853128, Where did you put your code? in head section of HTML? – Satpal Jul 02 '14 at 12:23

score 1 · Answer 2 · answered Jul 02 '14 at 11:58

The best solution for this case is to manually bootstrap angular on device ready event:

bootstrapAngular = function () {
  angular.bootstrap(document, ['YourAppName']);
}
document.addEventListener("deviceready", bootstrapAngular, false);

if you want to run angularjs app before device is ready and do some action when it is ready you do it like this

document.addEventListener("deviceready", function(){window.deviceIsReady = true}, false);

then where the action needs to be called:

$watch(function(){ return window.deviceIsReady}, function (status) {
  if (status === true) {
    //device is ready, do some crazy stuff
  }
})

How to declare device ready in angular js

2 Answers2