th (3)

ng-Cloak directives in AngularJS


By: Ujwala Patil | June 26, 2015

Today  I am going to share the interesting article about ng-Cloak directive….

Use of ng-Cloak directive

The ng-Cloak are used to prevent the un-compiled elements from being displayed and un-compiled elements can be  an element that hold and wait for incoming data

<div ng-cloak>{{myCloackVar}}</div>

If myCloackVar controller is not compiled or the myCloackVar data is not populated in ng-cloak prevent {{myCloackVar}} from being displayed and display only the HTML div when the myCloackVar variable is compiled.

Example wihout using ng-cloak:

<!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('getTestService', function($http) {
      this.getTestService = function() {
        return $http({
          method: 'GET',
          url:baseURL + '/SemanticWebApp/statistics';
        });
      };
    });

    app.controller("MyTestController", function($scope, getTestService) {
      $scope.resultData = [];

      getTestService.getTestService().then(function(data) {
        var items = data.items;
        angular.forEach(items, function(row) {
          $scope.resultData.push({
            "title": row.title
          });
        });
      });
    });
  </script>
</head>

<body ng-controller="MyTestController">
  <div>The ng-cloak example</div>
  <div>
    <div ng-repeat="testResult in resultData">
      {{testResult.title}}
    </div>
  </div>
</body>

</html>
output:
The ng-cloak example
{{testResult.title}}

You might be in this way thinking but think if we are consuming a service and we have to wait for 2-5 seconds for its response,it will be awkward to show those curly braces to the customer

So to avoid this we have class name “ng-cloak” in angularJS.Below is the syntax

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

Example using ng-cloak:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
  <style>
    [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.2.4/angular.js"></script>
  <script>
    var app = angular.module("myApp", []);

    app.service('getTestService', function($http) {
      this.getTestService = function() {
        return $http({
          method: 'GET',
          url:baseURL + '/SemanticWebApp/statistics';
        });
      };
    });

    app.controller("MyTestController", function($scope, getTestService) {
      $scope.resultData = [];

      getTestService.getTestService().then(function(data) {
        var items = data.items;
        angular.forEach(items, function(row) {
          $scope.resultData.push({
            "title": row.title
          });
        });
      });
    });
  </script>
</head>

<body ng-controller="MyTestController" ng-cloak>
  <div>The ng-cloak example</div>
  <div>
    <div ng-repeat="testResult in resultData">
      {{testResult.title}}
    </div>
  </div>
</body>

</html>

Hope this helps you !!!!!

 

 

 

 

 

 

This post has been viewed 13,191 times

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>