What is ng-Cloak directive in AngularJs?

on

What is ng-Cloak directive in AngularJs?

When we work on large application in AngularJs . Some time we  see {{}} expressions till application is loading. ngCloak directive stop such type flicking issue in AngularJs. ngCloak work when  application bootstrapping . It will add ngCloak class on run-time till application bootstrapped and ngCloak remove this class when application bootstrapped successfully. Means ngCloak directive add ngCloak class on selected element and remove ngCloak class when page loaded .

Such type of situation mostly faced when we call asynchronous API.We call a services in our controller. Our controller logic complete successfully. But we sent asynchronous request, if asynchronous request take time then our {{}} expressions will show for few seconds where we used model which populating data from asynchronous API.

If you explore Angular.js you will find out following code.

ngCloak class use CSS display property for hide element.

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

See npCloak directive

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
  }
});

ngCloak example -In this example we are using ngCloak it will not show {{}} expression , If request take time.

 Plunker - http://plnkr.co/edit/DhTH2hHngUEgwlCLc8rh?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
   <title>What is ng-Cloak directive in AngularJs?</title>
   <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('googleBlogService',
         function($http) {
            this.getBlogs = function() {
               return $http({
                  method: 'GET',
                  url: "http://api.openweathermap.org/data/2.5/history/city?q=London,UK"
               });
            };
         });
      app.controller("MyDemoController",
         function($scope,
            googleBlogService) {
            $scope.cityWeatherData = [];
            googleBlogService.getBlogs()
               .then(function(data) {
                  $scope.cityWeatherData =
                     data;
               });
         });
   </script>
</head>
<body ng-app="myApp" ng-controller="MyDemoController"
ngCloak>
   <div>The ng-cloak example</div>
   <div>
      <div ng-repeat="cData in cityWeatherData.data.list">
      Date : {{cData.dt}}
         <br /> Weather Description:{{cData.weather.description}}
         <br
         /> Weather main:{{cData.weather.main}}
         <br
         /> Pressure: {{cData.main.pressure}}
         <br
         /> Humidity: {{cData.main.humidity}}
         <br
         />
         <hr />
         <br /> </div>
   </div>
</body>
</html>
 <!DOCTYPE html>
<html>

<head>
   <title>What is ng-Cloak directive in AngularJs?</title>
   <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('googleBlogService',
         function($http) {
            this.getBlogs = function() {
               return $http({
                  method: 'GET',
                  url: "http://api.openweathermap.org/data/2.5/history/city?q=London,UK"
               });
            };
         });
      app.controller("MyDemoController",
         function($scope,
            googleBlogService) {
            $scope.cityWeatherData = [];
            googleBlogService.getBlogs()
               .then(function(data) {
                  $scope.cityWeatherData =
                     data;
               });
         });
   </script>
</head>

<body ng-app="myApp" ng-controller="MyDemoController"
ngCloak>
   <div>The ng-cloak example</div>
   <div>
      <div ng-repeat="cData in cityWeatherData.data.list">
      Date : {{cData.dt}}
         <br /> Weather Description:{{cData.weather.description}}
         <br
         /> Weather main:{{cData.weather.main}}
         <br
         /> Pressure: {{cData.main.pressure}}
         <br
         /> Humidity: {{cData.main.humidity}}
         <br
         />
         <hr />
         <br /> </div>
   </div>
</body>

</html>

Comments

Post a Comment