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.
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' />