Understanding Templates

AngularJS templates are fairly straightforward yet very powerful and easy to extend. Templates are based on standard HTML documents but extend the HTML functionality with three additional components:

■ Expressions: Expressions are bits of JavaScript-like code that are evaluated within the context of a scope. Expressions are denoted by {{}} brackets. The results of an expression are added to a compiled HTML web page. Expressions can be placed in normal HTML text or in the values of attributes, as shown here:

<p>{{1+2}}</p>
href="/myPage.html/{{hash}}"

■ Filters: Filters transform the appearance of data that is placed on a web page. For example, a filter can convert a number from the scope into a currency string or a time string.

■ Directives: Directives are new HTML element names or attribute names within HTML elements. They add to and modify the behavior of HTML elements to provide data binding, event handling, and other support to an AngularJS application.

The following code snippet shows an example of implementing directives, expressions, and filters. The ng-model="msg" attribute is a directive that binds the value of the <input> element to msg in the scope. The code in the {{}} brackets is an expression that applies the uppercase filter:

<div>
  <input ng-model="msg">
  {{msg | uppercase}}
</div>

When you load an AngularJS web page into a browser, you load it in a raw state, containing template code along with HTML code. The initial DOM is built from that web page. When the AngularJS application is bootstrapped, the AngularJS template compiles into the DOM, dynamically adjusting the values, event bindings, and other properties of the DOM elements to the directives, expressions, and filters in the template.

During compilation, HTML tags and attributes are normalized to support the fact that AngularJS is case-sensitive, whereas HTML is not. Normalization does two things:

■ Strips the x- and data- prefixes from the front of elements and attributes.

■ Convert names with : or - or _ to camelCase.

For example, all of the following normalize to ngModel:

ng-model
data-ng-model
x-ng:model
ng_model