AngularJS ng-cloak example

When you open a page which is developed using AngularJS in web browser, first it will display the uncompiled raw html. Once the angularjs compiled then it will show the compiled output so you will see the flicker/blink in html. To avoid the flicker/blink you can use the ng-cloak directive.

First add the below css in your style sheet at header level.

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

The above css rule will hide all the html elements which are tagged with ng-cloak directive. While compilation angularjs will make the ng-cloak directive element visible.

The ng-cloak directive can be given to body tag so that it will hide all the elements inside the body. But it is suggested that apply ng-cloak directive multiple small portions of the html page to permit progressive rendering of the browser view.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style> <script src=""></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <div id="template1" ng-cloak> {{ inputnumber }}</div> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.inputnumber = 48643589.456542; }); </script> </body> </html>