Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 559 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Using angular.bootstrap to Initialize Your App

1:13 Angular 1.x 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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Ben

Is there anyway to do this with ng-model?

In reply to egghead.io
Avatar
JItin

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?