Post
Ask Question

Creating Angular App Without Using ng-app Directive

Introduction

I was searching for new articles in C# Corner and got a chance to read an article displaying alerts in AngularJS. The article was nice and I read a comment for that article stating that "I never tried AngularJS without 'ng-app', so will it work, if yes then why? pls answer" by Sumit Jolly.
 
I replied there "AngularJS will work perfectly without using ng-app". So I will now show you guys how an Angular app will work without a ng-app directive, in other words, how to initialize an Angular app.
 
There are two ways in which we can initialize the Angular app. The most simple and static way is to use the ng-app directive in the root element. And the second method is to bootstrap the Angular app using Angular's bootstrap method. Let us explore these two with examples.

Automatic Initialization

In automatic initialization, when the DOM is loaded, in other words document.readyState == "complete" or when the DOMContentLoaded event is fired, the Angular looks for the ng-app directive.
 
If it finds the ng-app directive then it loads the modules associated with it and it does some injection magic for you and Angular sets the app ready.
 
Example:
  1. <!doctype html>  
  2. <html ng-app="module name is option here">  
  3. <head lang="en">  
  4.     <meta charset="utf-8">  
  5.     <title>Automatic Initializing</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     10 * 20 is {{ 10 * 20 }}.  
  10.     <script src="angular.js"></script>  
  11. </body>  
  12. </html> 
In the code above, the module name is options since we don't have anything to do with the module.
 
Manual Initialization

You can manually initialize the Angular app using Angular's bootstrap function. In manual initialization you have more control over the init process.
 
Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="utf-8">  
  5.     <title>Manual Initializing</title>  
  6. </head>  
  7. <body>  
  8.     <div id="container">  
  9.         10 * 20 is {{ 10 * 20 }}.  
  10.     </div>  
  11.     <script type="text/javascript" src="angular.min.js"></script>  
  12.     <script type="text/javascript" src="app.js"></script>  
  13. </body>  
  14. </html>  
In the code above, we have not used the ng-app directive in any of the elements. But we will be initializing the app from JavaScript.
 
In the app.js file:
  1. var app = angular.module("app", []);  
  2. angular.bootstrap(document.getElementById("container"), ["app"])  
As you can see, we can initialize the Angular app using the bootstrap function. The bootstrap function accepts two arguments, the first is the element to be initialized as the root and the second argument accepts an array of modules to be bound with.
 
Note:

You can bootstrap more that one element as a root but you can't bootstrap an element that is a child of a bootstrapped element. And you are not allowed to do automatic initialization as well as manual.
 
Example 1
  1. <div class="parent" >  
  2. <div class="child"> <!-- bootstrapping child is not possible -->  
  3. </div>  
  4. </div>  
Example 2
  1. <div class="parent" >  
  2. </div>  
  3. <div class="child"> <!-- bootstrapping child is now possible -->  
  4. </div>   
In the preceding examples, you cannot bootstrap the element "child" if you have bootstrapped the element "parent" already.
 
Conclusion
 
In this article, we have discussed the Angular application initialization. Thanks for reading.
Your comments are welcome.
 
Happy Coding :)
 


Similar Articles