Displaying and Formatting Data
In the AngularJS documentation all the directives are indexed under their camel-case
name (For example, ngModel). In a template, however, we need to use either snake-
case form (ng-model), colon-separated (ng:model) or the underscore-separated (ng_
model) form. Additionally, each reference to a directive can be prefixed with either x
or data.
Each single directive can be referenced by a number of different (but
equivalent) names. Taking the ngModel as an example we can write in
our template one of: ng-model, ng:model, ng_model, x-ng-model,
x-ng:model, x-ng_model, data-ng-model, data-ng:model,
data-ng_model, x:ng-model, data_ng-model, and so on.The data prefix is very convenient for keeping our HTML documents HTML5-
compliant, and making them pass HTML5 validators tests. Otherwise you are free to
choose whatever naming schema that pleases you; they are all equivalent.
All the examples in this book are using the shortest snake-case form
(for example, ng-model). We find this syntax concise and readable.Displaying results of expression evaluation
AngularJS offers various ways of rendering data. The net effect is always the same
model content is displayed to users, but there are also subtleties worth noting.
The interpolation directive
The interpolation directive is the most fundamental directive that deals with model
data display. It accepts expressions delimited by a pair of curly braces:
<span>{{expression}}</span>This directive will simply evaluate the expression and render its result on a screen.
The delimiter used by AngularJS is configurable; changing defaults might be
needed if you plan to mix AngularJS with other language template on the server-
side. Re-configuration is really simple and boils down to setting properties on the
$interpolateProvider: