Mystery behind ng-Cloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Following CSS which is defined as part of angular.js or angular.min.js makes it possible

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

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.

To ensure appropriate working for ng-cloak, usually angular.js or angular.min.js is loaded from head section. If not from head section then above CSS has to be incuded in the application’s style sheet.

the !important directive in CSS is a way to make your CSS cascade but also have the rules you feel are moTypically, if a user defines a style sheet to view web pages with, that style sheet will be over-ruled by the web page author’s style sheet. But if the user marks a style as !important, that style will overrule the web page author’s style sheet, even if the author marks their rule as !important.

This is a change from CSS1 to CSS2. In CSS1, author !important directives took precedence over user !important directives. CSS2 changed this to make the user’s style sheet have precedence.st crucial always be applied. A rule that has the !important directive will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s