Hiding AngularJS from the user
As unique and elegant as AngularJS is, the reality of the situation is that it is a framework that lives inside asynchronously executed client-side code, and this requires some considerations. One of these considerations is the first-time delivery initialization latency. Especially when your application JS files are located at the end of the page, you might experience a phenomenon called "template flashing," where the uncompiled template is presented to the user before AngularJS bootstraps and compiles the page. This can be elegantly prevented using ng-cloak.
Getting ready
Suppose that this is your application:
(index.html)
<body>
{{ youShouldntSeeThisBecauseItIsUndefined }}
</body>How to do it…
The solution is to simply declare sections of the DOM that the browser should treat as hidden until AngularJS tells it otherwise. This can be accomplished with the ng-cloak directive, as follows:
(app.css) /* this css rule is provided in the angular.js file...
