- AngularJS provides ngCloak directive to control the flickering issue when application is bootstrapping.
- AngularJS adds the ngCloak class to the element if the application is not bootstrapped and removes this class once the application is bootstrapped and ready.
- In this demo “We will see the use of ngCloak usage to an application”.
- Below code shows the uise of ngCloak usage.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-resource.min.js"></script>
<meta charset="utf-8">
<title>AngularJS ngCloak Example</title>
<style>
[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData">
{{item.title}}
</li>
</ol>
</body>
<script>
var myApp= angular.module("myApp",['ngResource']);
myApp.controller("MyController",
["$scope", "$resource","$timeout",
function($scope,$resource,$timeout){
$scope.myData =[];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow){
console.log(aSingleRow);
$scope.myData.push({
"title":aSingleRow.title
});
});
});
}]);
</script>
</html>
- The demo code is embedded in below JSBIN link.You can find the CSS classes which has display property set to none.
