initializing phonegap by deviceready event using require.js

Question

I'd like to find a way to initialize my app by the deviceready event I'm listening on.

I have this javascript files to be loaded:

//index.html
<head>
    <script src="cordova.js">
    <script src="require.js" data-main="main.js">
</head>

Now I'd like to call a function of main.js to start initializing my app, after the device really is ready. But I don't have any access because it's a requirejs module.

//index.html
<body>
    <script>
         function onDeviceReady() {
              //main.js initialize my app
         }
    </script>
</body>

It'd be great to be able to call a function inside main.js like this:

//main.js
var myApp = {};
define(['app'],
    function(app){
       var init = function(){
             app.run();
        }
        myApp.init = init;
    }
);

Than back in my index.html:

<body>
    <script>
         function onDeviceReady() {
             myApp.init();
         }
    </script>
 </body>

I don't know if this'd work. How do you initialize your phonegap app using requirejs?

score 3 · Accepted Answer · answered Jan 23 '14 at 08:36

The event listener could be added inside my main module. So the app becomes initialized by the deviceready event of the main module like this:

require([
'config/RootPathConfig',
'app',
'overrides'
], function(rootPath, app){

    document.addEventListener("deviceready",onDeviceReady,false);

    function onDeviceReady() {
        console.log("deviceReady");
        rootPath.initialize();
        app.init();                         //now the app content is loaded after the device is ready :)
    }

});

score 1 · Answer 2 · answered Jan 21 '14 at 16:49

1

The problem with this aproach is that it pollutes the global namespace, and it's overly complex. Why not just require app in your device ready callback?

<body>
    <script>
         function onDeviceReady() {
           require(['app'], function(App) {
             app.init()
           } 
         }
    </script>
</body>

Then you don't even need main.js! (unless you want to add some configuration).

answered Jan 21 '14 at 16:49

Lyn Headley

10,260
3
30
35

I guess the problem would be that require.js needs a module as xyz.js as reference to be applied. So I need the main.js (module) due to the relation here: – marcel Jan 21 '14 at 19:30
The data-main attribute is optional. You're welcome to use it and put configuration info in the file main.js, but only if needed. – Lyn Headley Jan 21 '14 at 19:57
So I could leave it blank? I'll try that out tomorrow. So far thx alot . – marcel Jan 21 '14 at 20:15
Leaving data-main of – marcel Jan 22 '14 at 08:23

score 0 · Answer 3 · answered Sep 11 '15 at 15:13

Another solution is to use a promise:

onDeviceReady.js

define(function() {
  return new Promise(function(resolve, reject) {    
    if (document.URL.match(/^https?:/i)) { // credits to http://stackoverflow.com/a/12255930/1225328
      console.log("Running in a browser...");
      resolve();
    } else {
      console.log("Running in an app...");
      document.addEventListener("deviceready", resolve, false);
    }
  });
});

main.js

define(["onDeviceReady", "app"], function(onDeviceReady, app) {
  onDeviceReady.then(function() {
    // device is ready, bootstrap your app:
    app.run();
  });
});

initializing phonegap by deviceready event using require.js

3 Answers3