- Why AngularJS?
- Understanding AngularJS
- An Overview of the AngularJS Life Cycle
- Separation of Responsibilities
- Integrating AngularJS with Existing JavaScript and jQuery
- Adding AngularJS to Your Environment
- Bootstrapping AngularJS in an HTML Document
- Using the Global APIs
- Creating a Basic AngularJS Application
- Using jQuery or jQuery Lite in AngularJS Applications
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Bootstrapping AngularJS in an HTML Document
To implement AngularJS in your web pages, you need to bootstrap the HTML document. Bootstrapping involves two parts. The first part is to define the application module by using the ng-app directive, and the second is to load the angular.js library in a <script> tag.
The ng-app directive tells the AngularJS compiler to treat that element as the root of the compilation. The ng-app directive is typically loaded in the <html> tag to ensure that the entire web page is included; however, you could add it to another container element, and only elements inside that container would be included in the AngularJS compilation and consequently in the AngularJS application functionality.
When possible, you should include the angular.js library as one of the last tags, if not the last tag, inside the <body> of the HTML. When the angular.js script is loaded, the compiler kicks off and begins searching for directives. Loading angular.js last allows the web page to load faster.
The following is an example of implementing the ng-app and angular.js bootstrap in an HTML document:
<!doctype html> <html ng-app="myApp"> <body> <script src="https://code.angularjs.org/1.2.9/angular.min.js"></script> <script src="/lib/myApp.js"></script> </body> </html>