Angularjs - ng-cloak/ng-show elements blink

Though the documentation doesn't mention it, it might not be enough to add the display: none; rule to your CSS. In cases where you are loading angular.js in the body or templates aren't compiled soon enough, use the ng-cloak directive and include the following in your CSS:

/*   Allow angular.js to be loaded in body, hiding cloaked elements until   templates compile.  The !important is important given that there may be   other selectors that are more specific or come later and might alter display.   */[ng\:cloak], [ng-cloak], .ng-cloak {  display: none !important;}

As mentioned in the comment, the !important is important. For example, if you have the following markup

<ul class="nav">  <li><a href="/foo" ng-cloak>{{bar}}</a></li></ul>

and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak'ed element

.nav > li > a {  display: block;}

So if you include a rule with simply display: none;, Bootstrap's rule will take precedence and the display will be set to block, so you'll see the flicker before the template compiles.

As mentioned in the documentation, you should add a rule to your CSS to hide it based on the ng-cloak attribute:

[ng\:cloak], [ng-cloak], .ng-cloak {    display: none;}

We use similar tricks on the "Built with Angular" site, which you can view the source of on Github: https://github.com/angular/builtwith.angularjs.org

Hope that helps!

Make sure AngularJS is included in the head of the HTML. See ngCloak doc:

For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.