Chapter 10 ■ Deployment ConsiDerations

Listing 10-12. Hiding a larger portion of the DOM tree

The approach you take is likely to depend on the way your application is structured. That is, if the first screen of
your application consists of parts which are mostly dynamic, you might want to hide the whole page by placing the
ng-cloak directive on the controller element, or even the tag. Otherwise, you might want to use the ng-cloak
directive on an element-by-element basis, so that users can view the static portions of the page while your application
scripts finish loading and are ready to bootstrap the application.
Essentially, ng-cloak is simply a way of temporarily applying the CSS code display: none; to the element
upon which it is declared. However, it is not the only solution to this problem. Another option that you might want to
consider is to not use the double curly braces at all. Instead, you can use the ng-bind directive.

Listing 10-13. The ngBind directive in action

If you adopt the approach shown in Listing 10-13, you will not see anything other than empty space in the case
of lengthy script downloads. An empty span tag will appear momentarily. Perhaps this is a better approach than an
unpleasant looking unprocessed expression?

Minification and Bundling

Many AngularJS apps are made up of a number of potentially large files; each of which must be requested by the
user’s web browser and then transmitted across the network. A two-fold concern here could be how to trim the files
down to much smaller sizes and how to keep the number of network requests for such files to a minimum. A process
known as minification and bundling is typically applied in these situations.
Think about how well formatted your JavaScript source code is; it is (hopefully) well commented and has lots
of spaces and tabs that help to make easy to read. This is great from the point of view of a developer, as it makes life
simpler. At the end of the day though, the JavaScript interpreter doesn’t care about any of this. Consider the two code
listings that follow. You don’t need to understand the code, just consider the fact that Listing 10-14 and Listing 10-15
are functionally identical.

Listing 10-14. Typical unminified source code

function getElementsByClassName(className) {
var results = [];
walkTheDOM(document.body, function (node) {
var array, // array of class names
ncn = node.className; // the node's classname

// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the list of results.