Packaging and Deploying AngularJS Web Applications
Avoid displaying templates in their unprocessed form
An AngularJS-powered web page needs to download both AngularJS code and
application scripts before templates can be processed and rendered. This means
that users can momentarily see AngularJS templates in their raw, unprocessed form.
Taking the classical "Hello World!" example and assuming that JavaScript takes a
long time to download, users would be presented with the following page until
scripts are downloaded and ready:
After all the scripts are downloaded the AngularJS application will be kickstarted and
the interpolation expression ({{name}}) will be processed to display value defined on
a scope. The whole process is less than ideal: not only might people might be surprised
seeing strange looking expressions displayed on a page, but they also might notice UI
flickering when expressions are replaced with their interpolated values. AngularJS has
two directives that help battling those negative UI effects: ng-cloak and ng-bind.
Hiding portions of the DOM with ng-cloak
The ng-cloak directive lets you hide (display:none) parts of the DOM tree until
AngularJS is ready to process the whole page and make it live. You can hide any
part of the DOM tree by placing the ng-cloak directive on chosen DOM elements
as follows:
<div ng-controller="HelloCtrl" ng-cloak>
<h1>Hello, {{name}}!</h1>
</div>If the first page of your application consists of parts, which are mostly dynamic, you
may decide to hide content of the whole page by placing the ng-cloak directive on
the
static content, placing ng-cloak on elements enclosing dynamic parts is a better
strategy, as at least users will see static content while AngularJS is being loaded
and bootstrapped.