For AngularJS, if we use ngCloak, shouldn't we add one CSS style to our HTML file to hide the element?

Question

What if we use ng-cloak, but the angular script is loading slowly, or if the user has turned off JavaScript, then wouldn't the user still see {{ a + b }} or anything we wanted to hide?

Would it be a good practice then, if we add

<style>
    [ng-cloak] { display: none !important }
</style>

to our HTML file's header section? Or would there be other CSS style that might be appropriate to add if we are using AngularJS and the Internet connection might be slow or if the user has turned off JavaScript?

You should put that style in css file & make sure all the css gets loaded before all the other js file.. — Pankaj Parkar, Jan 27 '16 at 04:25
user turns off javascript nothing will work. `ng-cloak` docs explain you need the style rule. That's the whole idea behind it — charlietfl, Jan 27 '16 at 04:25
@PankajParkar but what if the CSS file loads slowly too? Can you guarantee the CSS file loads before any JS files? — nonopolarity, Jan 27 '16 at 04:27
@charlietfl is there actually a rule that says... if I am linking to an external CSS file and it take 5 seconds to load, then none of the HTML can show? do you have a reference to that rule? — nonopolarity, Jan 27 '16 at 05:03

score 1 · Answer 1 · answered Jan 27 '16 at 05:20

1

If you are loading angular.js in the head section of your page, then you should not have to add any css yourself for ng-cloak to work properly. Angular adds these styles itself when it loads, and since this happens in the head section, these styles are applied before the browser evaluates the body of your page and renders any content.

However, if you are loading angular asynchronously with a script loader, then you do need to add the styles manually (preferably in a stylesheet or style block loaded in the head of your page).

From the docs:

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

answered Jan 27 '16 at 05:20

Joe Enzminger

11,110
3
50
75

I might have thought that anything that loads first will be displayed... is there actually a specific rule as to "nothing in `` will show until the `` content has fully loaded? (any reference?) – nonopolarity Jan 27 '16 at 06:36
Yes, there is. I'm not sure if it's in an RFC or not, but all modern browsers follow this convention. [this question](http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page) goes into some detail about the subject. – Joe Enzminger Jan 27 '16 at 07:09

Matthew Haugen · Answer 2 · 2016-01-27T04:48:00.743

I'm not totally sure I understand the question, but yes, I believe what you are saying makes sense.

ng-cloak is a bit different from other directives, because its only job is to remove itself. Angular does not apply any special styling to that attribute. It just removes it.

That means, for example, you could apply styling to make unloaded Angular elements have a background color, instead of being invisible. I don't know why you'd do that, but that's something to remember--it's just a boring old attribute until Angular removes it.

Behavior of loading CSS files is up to the browser, so it's probably fair to put a style tag in the head, but that's just like any other CSS resources--you rarely want elements loading without styles, and browsers are pretty good about avoiding that. I often like to put it in the head just for good measure, but I can understand someone not wanting to do that. But you definitely need it somewhere.

If you have JavaScript disabled, or before Angular loads, it's just like any other attribute:

[ng-cloak]{
  display: none
}

<div ng-cloak>
  Where am I?
</div>

But once Angular loads (no matter how long it takes to set up, simulated here by a one-second timer):

window.setTimeout(function() {
  $("[ng-cloak]").removeAttr("ng-cloak");
}, 1000);

[ng-cloak] {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-cloak>
  Here I am!
</div>

For AngularJS, if we use ngCloak, shouldn't we add one CSS style to our HTML file to hide the element?

2 Answers2