Avoiding expressions being shown on page load

Question

In an AngularJS video at one point I saw how to avoid an expression being visible before the Javascript parses it. But I can\'t remember how it was done...

I have a

Answer 1

As the others mentioned, use ng-cloak but also add the following to your CSS if it is the first to load in your page.

[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}

This will ensure that your div template is hidden. Below that div template, add something like

Loading...

The assignment of the $root.initializing.status with cause a true value for ng-hide.

Here is the jsfiddle and the following is the code:

HTML:

    
{{$root.initializing.status}}
    
Loading...

JS:

function Ctrl($timeout, $scope) {
///simulating loading
    $timeout(function () {
        $scope.$root = {
            initializing: {
                status: 'Complete!'
            }
        }
    }, 2000);
}