Using angular.bootstrap to Initialize Your App

AngularJS - Using angular.bootstrap to Initialize Your AppAngularJS Video Tutorial by John Lindquist

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


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.
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?


index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
</head>
<body>

  <div id="container">
    {{random}}
  </div>

  <div id="container2">
    {{random}}
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var app = angular.module("app", []);

app.run(function($rootScope) {
    $rootScope.random = Math.random()
})

angular.bootstrap(document.getElementById("container"), ["app"])
angular.bootstrap(document.getElementById("container2"), ["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.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.