I have an AngularJS project, I want to prevent a FOUC during page load on a classname. I've read about ng-template but that seems useful only for content within a tag.
<body class="{{ bodyClass }}">
I would like it to be "login" on page load. Any strategy for this? Or do I just have to fudge it and load it as 'login' and manually use javascript to to tweak the DOM just for this instance.
See Question&Answers more detail:os
What you are looking for is ng-cloak.
You have to add it like this:
<body class="{{ bodyClass }}" ng-cloak>
and this will prevent unwanted flashing.
Link to docs about this.
Edit:
It is also advisable to put the snippet below into your CSS file, according to docs.
"For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application."
[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
