One of the advantages of manually boot-strapping Angular.js is the ability to take care of any setup-tasks that you want completed before the DOM is parsed.
In the previous article: “Angular.js Basics: Manually Boot-Strapping Your Application (Part I)“, we learned how simple it is to manually boot-strap Angular. In that example, our HTML was hard-coded in the page, including the {{myData}} template. We manually boot-strapped Angular by clicking a button, which in-turn, executed our boot-strapping code.
This was fine for a basic proof-of-concept, but having the {{myData}} template render on page load is not acceptable. For this article, our goal will be to inject some HTML into the DOM, and then boot-strap Angular, building upon our code from Part I of this series.
Example # 1:
|
1 2 3 |
angular.element(document).ready(function(){ //our JavaScript code will go here. }); |
In Example # 1, we leverage the angular.element() method, passing it a reference to the document object. We then chain the ready() method to the return value of the angular.element() method, passing it an anonymous function. This tells Angular that when the document is in a “ready” state, the anonymous function passed to the .ready() method should be executed.
Example # 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <div id="main"> <!-- our HTML will be injected here --> </div> <script> function bootAngular(){ var myMod = angular.module('myApp', []); angular.bootstrap( $('body'), ['myApp']); }; angular.element(document).ready(function(){ //our JavaScript code will go here. }); </script> </body> |
In Example # 2, we have added a few things:
1) The base DOM element that will contain HTML, managed by Angular (i.e. DIV#main)
2) A call to the angular.element() method, which sets up an anonymous function that will be called when the document is read
3) The bootAngular() function, which we have re-used from Part I of this series.
HERE IS THE JSFIDDLE LINK FOR EXAMPLE # 2: http://jsfiddle.net/T3jcx/
When you view the JsFiddle.net link for Example # 2, you’ll notice… well you’ll notice nothing! This is because there are no DOM elements for Angular to interact with. Although our code does, in fact, boot-strap Angular, Angular parses the DOM, but finds no “ng” directives or data-bound templates.
Example # 3A:
|
1 2 3 4 |
var template = '' + '<h2>Type Something In the Text-Box.</h2>' + '<input type="text" ng-model="myData" />' + '<p class="content"><b>The Value of "myData" is:</b><span class="val">{{myData}}</span></p>'; |
In Example # 3A, we have a string that contains HTML that will be injected into the page. The actual HTML is virtually identical to the markup from Part I of this series, but instead of hard-coding it in the actual web-page, it is contained in a string, which is a JavaScript variable: “template”.
Example # 3B:
|
1 2 3 4 |
myMod.run(function ($rootScope) { $rootScope.myData = "Angular has been boot-strapped!"; $('#main').append(template); }); |
In Example # 3B, we leverage the .run() method of our module. This is a method that we did not create, Angular provides it because our module (“myMod”), was created by Angular. We pass an anonymous function to the .run() method and this function takes the $rootScope object as an argument. A detailed discussion of the $rootScope object is beyond the scope of this article. But, it is helpful to know that it is the top-level container for all data managed by our module.
Inside of the anonymous function passed to the .run() method, we do two things:
1) Set the value of $rootScope.myData
2) Inject our HTML into the DOM
The most important thing to know is that when our module is instantiated, it’s .run() method is executed. So, we have specified what we want done when our module starts, which is to set the value of $rootScope.myData, and inject our HTML into the page.
Example # 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> </head> <body> <div id="main"> <!-- our HTML will be injected here --> </div> <script> var template = '' + '<h2>Type Something In the Text-Box.</h2>' + '<input type="text" ng-model="myData" />' + '<p class="content"><b>The Value of "myData" is:</b><span class="val">{{myData}}</span></p>'; //our boot-strapping function function bootAngular(){ //create the Angular module var myMod = angular.module('myApp', []); //configure code that will execute when the module is instantiaged myMod.run(function ($rootScope) { $rootScope.myData = "Angular has been boot-strapped!"; $('#main').append(template); }); //boot-strap angular! angular.bootstrap( $('body'), ['myApp']); }; //when the document is ready... angular.element(document).ready(function(){ //execute our boot-strapping function bootAngular(); }); </script> </body> |
In Example # 4, we have the completed code. Comments have been added to help you follow along.
HERE IS THE JSFIDDLE LINK FOR EXAMPLE # 4: http://jsfiddle.net/w6Y3n/
How to Demo This Code:
Although it feels as if the HTML that contains the text box and {{myData}} template render on page load, they do not. Things happen pretty quickly here, but now that we have our completed code, and you have the JsFiddle.net link so that you can see the example code in action, let’s run-down what happens.
1) When the page loads, the BODY tag contains an empty DIV element with the ID: “main”
2) In the SCRIPT block, we create a variable named: “template”, which is a string containing HTML that will be injected into the page
3) We create the function: bootAngular(), which contains the code that boot-straps Angular
4) The angular.element() method is called, and then the ready() method is chained to the return value, and we execute the bootAngular() function as a result
5) Inside the bootAngular() function, we create an Angular module “myApp;” we call the myMod.run() method, which sets the value of $rootScope.myData, and then our HTML is injected into the DOM
6) We call the angular.bootstrap() method, which instantiates the myApp module, telling it to manage the BODY element in our page.
Summary:
In this article, we took a slightly more sophisticated approach to manually boot-strapping Angular. We leveraged the angular.element() method, which allows us to tell Angular to wait until the document is ready before proceeding, by using the .ready() method. We also learned about the [MODULE].fun() method, which provides a way to specify code that will execute when our module is instantiated. In the next article of this series, we will learn how to boot-strap multiple areas of the DOM manually.
