AngularJS strategy to prevent flash-of-unstyled-content for a class

javascript dom angularjs interpolation fouc
Casey Flynn picture Casey Flynn · Apr 18, 2013 · Viewed 27.8k times · Source

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.

Answer

the-lay picture the-lay · Apr 18, 2013

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;
}

Related questions

AngularJS: How to run additional code after AngularJS has rendered a template?

I have an Angular template in the DOM. When my controller gets new data from a service, it updates the model in the $scope, and re-renders the template. All good so far. The issue is that I need to also …

Read More
CoffeeScript - Referencing DOM nodes in Angular expressions is disallowed

My main question is simple : I get errors when doing DOM manipulation within Controllers or Directives however, the functionality works perfectly. Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: open() I would like to ignore these …

Read More
AngularJS - ngRepeat with multiple object types

I have a list of items. An item can be a number of things, let's say the list is something like so : [userObject , vehicleObject , userObject , animalObject , animalObject] Now I want to render the list with ngRepeat directive that will use …

Read More