Search Tutorials


AngularJS ng-cloak | JavaInUse

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-


ang5_1

AngularJS example with ng-cloak directive-
It may happen that the webservice call takes longer time and the value is not populated for the {{testNGResult.title}}.
Using ng-cloak directive the body will not be displayed till all the contents are compiled. So the element in curly brackets will not be displayed until its value is populated. 
<!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>
  
 <style>
    [ng\: cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
      display: none !important;
    }
  </style>
  <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" ng-cloak>
  <div>The AngularJS ng-cloak directive example</div>
  <div>
    <div ng-repeat="testNGResult in resultData">
      {{testNGResult.title}}
    </div>
  </div>
</body>

</html>
	
	
 
See Also

Creating a Simple AngularJS Application with ngRoute and Partials
Removing the # from the AngularJS URL
Use Google reCaptcha with AngularJS
PrimeNG-UI Components for AngularJS 2 Basic Example

Popular Posts





See Also