CODEWITHSUNDEEP
angularjsngcloak
Harshil Sharma
Harshil Sharma

Reputation: 2035

Where exactly to use ngCloak in existing app

We have an AngularJS app (not a SPA). We face this problem where some part of uncompiled template is displayed for brief moments, so I am applying ngCloak directive to the app.

I'm not sure of where exactly should this directive be used - every single, small element or large sections (or somewhere else). What I'm currently doing is throttling connection via Chrome dev tools to a very slow speed and then checking which parts of template show up in raw state. But I feel this is not a very deterministic approach.

So I would like to know the where exactly to use ngCloak.

Thank You.

Upvotes: 0

Views: 67

Answers (3)

JLRishe
JLRishe

Reputation: 101690

Applying ngCloak to every small element is certainly the wrong way to go.

You would typically want to apply it either to large sections, or to the entire portion of your page that uses Angular. The objective is to hide these parts of the page until Angular is ready to use.

This is what the official documentation says:

The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

If you don't want your users to be looking at blank space, you can show a loading animation until Angular finishes loading. You can do this by giving the element an ng-show="false" directive:

<img src='/images/loading.gif' ng-show='false' />

Upvotes: 2

Maher
Maher

Reputation: 2547

Without [ng-cloak] when you run your application before angularJs rendering you will see some angular codes like "{{myngModel}} or something like this, when you put [ng-cloak] in your project on run you didn't see those codes until rendering complete . 

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>app</title>
</head>

<body ng-cloak>
</body>

</html>

Upvotes: 0

Dineshaws
Dineshaws

Reputation: 2083

Please add following code into head section of index.html 

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

And you can add same code into your css file

Thanks

Upvotes: 1

Related Questions