Using angular.bootstrap to Initialize Your App

AngularJS Video Tutorial by

Using angular.bootstrap to Initialize Your App

1:13 AngularJS lesson by

In this lesson, John shows you how to use angular.bootstrap as an alternative approach to initializing your application without using ng-app.

Find the code for this lesson on JSBin.

egghead.io comment guidelines

egghead.io
Avatar

In this lesson, John shows you how to use angular.bootstrap as an alternative approach to initializing your application without using ng-app.

Ben
Avatar

Is there anyway to do this with ng-model?

JItin
Avatar

This (using angular.bootstrap) requires that the angularjs file be loaded at the end of the body and not in the head.
If you load it in the head, it doesn't work - I guess document.getElementById does not work as the body has not loaded yet.

But loading it after the body causes a small period of time where you see everything in curly braces.
The solution I found was this: wrapping up the angular.bootstrap call in the document.ready function like this:

angular.element(document).ready(function(){
angular.bootstrap(document.getElementById("container"), ["app"])
});

John Lindquist: Angular bootstrap can help you get around the requirement of using ngApp. If I delete this, you can see that I just get this string of curly braces and random.

What I can do is say "angular.bootstrap" and then look up the elements. I'll get element by ID, and we'll have an element called "container."

If I say this is an ID of container, then the string will go away there, and the second parameter here is actually the modules you want to pass in. If I pass in my app, which matches up with this, you can see I get the random value back.

You can actually pass in as many modules as you want in here. This is just going to return the injector that controls each of those modules.

You can see that if I actually duplicate this and have two separate apps running on the same page...We'll make this one container two and duplicate this line.

You can see that I'll have two completely separate apps running on different modules and getting different random numbers. They're not sharing the same scope or the same random.


Related lessons: