Chapter 12The ng-cloak directive works with CSS rules to hide elements containing dynamic
content, and show them again when AngularJS is ready, and compile the DOM
tree. To hide DOM elements, there is a CSS rule that matches the ng-cloak HTML
attribute, which is as follows:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
.x-ng-cloak {
display: none;
}Those CSS rules are created dynamically in the main AngularJS script so you don't
have to define them by hand.
When AngularJS is loaded and kickstarted it will go over the DOM tree compiling
and linking all the directives. The ng-cloak directive is both a regular HTML
attribute and a directive, that when executed will remove the ng-cloak attribute
from a DOM element. As a result CSS rules matching the ng-cloak attribute won't
be applied and a DOM element will be shown.
Hiding individual expressions with ng-bind
The ng-cloak directive is a good option for hiding large portions of the DOM,
until AngularJS is ready to do its job. While it removes unpleasant UI effects it
doesn't change that fact that our users won't see any content until dynamic
scripts are fully functional.
Ideally we would like to prerender the first page on the server side and blend it
with dynamic JavaScript functionality when AngularJS is ready. Different people
are experimenting with various server-side rendering techniques, but as of the time
of writing, there is no official AngularJS support for server-side rendering. Still, if
the first page of your application consists of mainly static content, you can use the
ng-bind directive in place of interpolation expressions.
Provided that you've got mostly-static HTML with a couple of interpolation
directives use the following code:
<div ng-controller="HelloCtrl">
Hello, {{name}}!
</div>You could replace {{name}} with the ng-bind attribute equivalent as follows:
<div ng-controller="HelloCtrl">
Hello, <span ng-bind="name"></span>!
</div>