initialize onsenui after document loaded

Question

i´m trying to initialize onsenui after some js files are loaded, but then ons.bootstrap() is causing the errors. when i´m using a sample from onsenui everything is working quite good, but in my project, i have to load the js files dynamically and synchronously and then ons.bootstrap(); give me the this error "'AppController' is not a function, got undefined"

if same js libs in same order are declared in html doc with script tags everything is working good.

i´ve found that if the scripts are loading through normal script tags and then i´m waiting till html document is fully loaded and then call ons.bootstrap() through developer tools i got same error.

so the question is how to initlaize onsen ui after document is loaded? Hope someone can help, I´m not very familiar with angularJS/OnsenUi... first project

thanks

I have create 2 samples to demonstrate my problem.

working like onsenui samples. jbBgmd http://codepen.io/anon/pen/jbBgmd
not working like in my case. BoWXdP http://codepen.io/anon/pen/BoWXdP

any idea?

Andi Pavllo Andi Pavllo · Accepted Answer · 2015-10-05T12:37:14

You are trying to load Onsen after the elements have been rendered, that's why it gave an error. You should always execute Onsen before the components are rendered.

If you want to execute some code after the DOM has been loaded, you should use ons.ready() function, you can take a look at it in the official documentation.

Here you can find the fixed and working CodePen: http://codepen.io/andipavllo/pen/ZbKzRy

Here is the edited JS:

ons.bootstrap().controller("appController", function () 
    {
      ons.ready(function(){
      console.log("works")
    })
});

Hope it helps!

initialize onsenui after document loaded

1 Answers