How can I prevent Angular from rendering and displaying a page before ng-if evaluation?

Question

I wrote a code below that basically shows a block of code based on the "ng-if" evaluation(true/false). A problem I have is that even wehn vm.anyItems equals to true, AngularJS tries to render the <p>...</p> block and display it on a browser before the <div>...</div> is properly displayed. Are there any ways to prevent this?

<div ng-if="vm.anyItems">
    <div>...</div>
</div>
<div ng-if="!vm.anyItems">
    <p>XXXXXXXXXXXXX</p>
</div>

Answer 1

Try looking into ngCloak. This will stop your code from being displayed until after the application is rendered by Angular.

Your code can do the following:

<div ng-cloak ng-if="vm.anyItems">
    <div>...</div>
</div>
<div ng-cloak ng-if="!vm.anyItems">
    <p>XXXXXXXXXXXXX</p>
</div>

Source: https://docs.angularjs.org/api/ng/directive/ngCloak