It is easy to add AngularJS to an HTML file. Simply add a script element to import the angular.js file, create an AngularJS module, and apply an attribute to the html element, as shown in Listing 2-2.
Listing2-2. Creating and Applying an AngularJS Module in the todo.html File
<!DOCTYPE html>
<html ng-app=”todoflpp”>
<head>
<title>TO DO List</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script src=”angular.js”></script>
<script>
var todoflpp = angular.module(“todoflpp”, []);
</script>
</head>
<body>
<div class=”page-header”>
<h1>Adam’s To Do List</h1>
</div>
<div class=”panel”>
<div class=”input-group”>
<input class=”form-control” />
<span class=”input-group-btn”>
<button class=”btn btn-default”>Add</button>
</span>
</div>
<table class=”table table-striped”>
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>
AngularJS apps are formed from one or more modules. Modules are created by calling the angular.module method, as follows:
…
var todoApp = angular.module(“todoApp”, []);
…
I describe modules properly in Chapters 9 and 18, but you can see how I create and apply a module for the example in Listing 2-2. The arguments to the angular.module method are the name of the module to create and an array of other modules that are going to be needed. I have created a module called todoApp, following the slightly confusing convention of appending App to application module names and telling AngularJS that I need no other modules by providing an empty array for the second argument. (Some AngularJS features are available in different modules, and I show you how to create your own modules in Chapter 18.)
I tell AngularJS how to apply the module through the ng-app attribute. AngularJS works by extending HTML by adding new elements, attributes, classes, and (although rarely used) special comments. The AngularJS library dynamically compiles the HTML in a document in order to locate and process these additions and create an application. You can supplement the built-in functionality with JavaScript code to customize the behavior of the application and define your own additions to HTML.
■ Note AngularJS compilation isn’t like the compilation you might have encountered in C# or Java projects, where the compiler has to process the source code in order to generate output that the runtime can execute. It would be more accurate to say that the AngularJS library evaluates the HTML elements when the browser has loaded the content and uses standard DOM API and JavaScript features to add and remove elements, sets up event handlers, and so on. There is no explicit compilation step in AngularJS development; just modify your HTML and JavaScript files and load them into the browser.
The most important AngularJS addition to HTML is the ng-app attribute, which specifies that the html element in the listing contains a module that should be compiled and processed by AngularJS. When AngularJS is the only JavaScript framework being used, the convention is to apply the ng-app attribute to the html element, as I have done in Listing 2-2. If you are mixing AngularJS with other technologies such as jQuery, you can narrow the boundaries of the AngularJS app by applying the ng-app attribute to an element within the document.
APPLYING ANGULARJS TO HTML
It can seem odd to add nonstandard attributes and elements to an HTML document, especially if you have been writing web apps for a while and have become accustomed to sticking to the HTML standard. There is an alternative approach you can use if you just can’t get used to the idea of attributes like ng-app. You can use data attributes, prefixing the AngularJS directive with data-. I describe directives in detail in Part 2, but for the moment it is enough to know that ng-app is a directive and so can be applied like this:
…
<html data-ng-app=”todoApp”>
…
I am going to use the AngularJS convention and use the ng-app attribute and all of the other HTML enhancements that are available. I recommend you do the same, but you can use one of the other approaches if you prefer—or if your development tool chain can’t process nonstandard HTML elements and attributes.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.