AngularJS Web Application Development Cookbook

Using ng-bind instead of ng-cloak

The ng-cloak directive is a workable solution to the rendering latency problem, but to the seasoned developer, blanking out the entire page or sprinkling ng-cloak throughout the application's templates seems like a suboptimal solution. In many scenarios, a more elegant fix would be to display as much of the page as possible and interpolate data as it is calculated to make the page load seem snappier to the end user.

How to do it…

The {{ }} interpolation syntax in AngularJS causes problems when the template loads, and is displayed before compilation can occur. The following is an example:

<div ng-controller="PlayerCtrl">
  Player: <span>{{ player.name }}</span>
</div>

If this template is displayed before compilation, ...