Angularjs manual bootstrap

Question

I would like to manually bootstrap my angular app on dom load but Angular doesn't seem to be able to bootstrap my app when i try to wait until dom load

 <body>
 <div ng-app="myApp">
  {{1 + 1}}
 </div>
 <script src="angular.js"></script>
 <script type="text/javascript" src="delay.js"></script>

</body>

And here's delay.js

window.onload = function(){
console.log('reached 2')
var myApp = angular.module('myApp',[])
}

console.log('reached 1')

The above code throws with the following error.

reached 1 
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify th...<omitted>...0) 
reached 2

After looking at various other examples, the bootstrapping seems to work seamlessly when i do it outside the window.onload event like this.

delay.js

//this bootstrap works 
angular.module('myApp',[])
console.log('reached 1')

Not sure what's happening here, is the module not visible to angular during the onload callback ?

Further even the following in delay.js fails

//still fails to bootstrap     
angular.element(document).ready(function(){
    console.log('reached 2')
    var myApp = angular.module('myApp',[])
    })

Even the following fails to work

angular.element(document).ready(function(){
console.log('reached 2')
angular.bootstrap(document,[myApp])
var myApp = angular.module('myApp',[])
})

OR

angular.element(document).ready(function(){
console.log('reached 2')
var myApp = angular.module('myApp',[])
angular.bootstrap(document,[myApp])
})

OR even

angular.element(document).ready(function(){
angular.bootstrap(document.body.children[0],['myApp'])
var myApp = angular.module('myApp',[])
console.log('reached 2')
})

The above error does make sense, as the dom is trying to access myApp, which is not yet initialized. And according to the Angular documentation, you need to add angular.bootstrap(document, ['myApp']); — amrit_neo
– amrit_neo, Commented Mar 8, 2014 at 13:30
but that is why i'm trying to bootstrap the app after dom load event, besides even when i try "angular.bootstrap(document,[myApp])" the bootstrapping fails. — noob Mama
– noob Mama, Commented Mar 8, 2014 at 13:36

bernhardw · Accepted Answer · 2014-03-08 15:27:46Z

1

AngularJS bootstraps itself automatically on DOMContentLoaded. This event fires as soon as the DOM is ready. That means you don't have to manually bootstrap your app if all you need is the DOM being ready.

The window.onload event however waits for all content to be loaded. That includes all scripts, images and other resources.

In case you still want to manually bootstrap on ready, this is how you do it:

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

angular.bootstrap will create the app for you on the element specified. In this case on document. This means you don't need to have the ng-app directive if you manually bootstrap your app. (Please note that I first incorrectly assumed that you still need it.)

You can not have your module declaration inside your ready callback, because as stated in the developer guide:

"Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter."

Here is a corrected fiddle that shows that ng-app isn't needed when manually bootstrapping: http://jsfiddle.net/Yxaba/

edited Mar 8, 2014 at 15:27

answered Mar 8, 2014 at 14:17

bernhardw

3,2693 gold badges22 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

noob Mama Over a year ago

hmm.. makes logical sense, but even this doesn't seem to be working. I'll update the edited code with your suggestion

bernhardw Over a year ago

That's probably because you have your module definition inside your ready callback. See my edit above.

noob Mama Over a year ago

thanks for the fiddle ! but i'm still trying to understand why i can't initialize my module inside the callback

noob Mama Over a year ago

also it appears like you don't really have to bootstrap from a handle to the div. It seems to work on the entire DOM as well jsfiddle.net/7U87n/2

bernhardw Over a year ago

I'm sorry for the confusion, I incorrectly assumed you still need ng-app if you manually bootstrap. I have updated my answer to reflect that and have posted a link to why you cannot have your module declaration inside the ready callback as well.

|

Collectives™ on Stack Overflow

Angularjs manual bootstrap

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related