Hi All,
When we use AngularJS in any of our page, while rendering it on browser we happen to see flicker in HTML with uncompiled raw html. And once the AngularJS is compiled then it will show the compilled output. To avoid this flickering we can use ng-cloak.
To use ng-cloak:
Step 1 - Add CSS in style sheet at header level:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
display: none !important;
}
This will hide all the html elements which are tagged with ng-cloak directive. While compilation angularjs will make the ng-cloak directive element visible.
ng-cloak directive is suggested to be applied in multiple small portions of the html page to permit progressive rendering of the browser view.
Sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></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 = 1231215.22;
});
</script>
</body>
</html>
Happy Coding...
0 Comment(s)