AngularJS NgCloak directives Example
Overview
The directive ng-cloak is used to prevent the flickering issue when
application is bootstrapping.
What does one mean by flickering issue-
In AngularJS the data is populated in variables using syntax {{var}}
.
Initially when the application is getting bootstrapped it may happen
that the {{var}}
takes time to load and instead of its value, the
variable is displayed in its raw format as {{var}}
. Later when the
{{var}}
element is compiled its value gets displayed properly. So
for some seconds the user might see {{var}}
and later correct value
when correctly loaded. This is known as flickering issue.
AngularJS example without ng-cloak directive-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.2.4/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.service('getNgTestService', function($http) {
this.getNgTestService = function() {
return $http({
method: 'GET',
url:baseURL + '/TestWebApp/getValue';
});
};
});
app.controller("MyNGTestController", function($scope, getNgTestService) {
$scope.resultData = [];
getNgTestService.getNgTestService().then(function(data) {
var items = data.items;
angular.forEach(items, function(row) {
$scope.resultData.push({
"title": row.title
});
});
});
});
</script>
</head>
<body ng-controller="MyNGTestController">
<div>The AngularJS ng-cloak directive example</div>
<div>
<div ng-repeat="testNGResult in resultData">
{{testNGResult.title}}
</div>
</div>
</body>
</html>
The output is-
Overview
The directive ng-cloak is used to prevent the flickering issue when application is bootstrapping.What does one mean by flickering issue-
In AngularJS the data is populated in variables using syntax
{{var}}
.
Initially when the application is getting bootstrapped it may happen
that the {{var}}
takes time to load and instead of its value, the
variable is displayed in its raw format as {{var}}
. Later when the
{{var}}
element is compiled its value gets displayed properly. So
for some seconds the user might see {{var}}
and later correct value
when correctly loaded. This is known as flickering issue. AngularJS example without ng-cloak directive-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.2.4/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.service('getNgTestService', function($http) {
this.getNgTestService = function() {
return $http({
method: 'GET',
url:baseURL + '/TestWebApp/getValue';
});
};
});
app.controller("MyNGTestController", function($scope, getNgTestService) {
$scope.resultData = [];
getNgTestService.getNgTestService().then(function(data) {
var items = data.items;
angular.forEach(items, function(row) {
$scope.resultData.push({
"title": row.title
});
});
});
});
</script>
</head>
<body ng-controller="MyNGTestController">
<div>The AngularJS ng-cloak directive example</div>
<div>
<div ng-repeat="testNGResult in resultData">
{{testNGResult.title}}
</div>
</div>
</body>
</html>
The output is-