$scope vs scope in angularjs

What about ng-Cloak directive in AngularJs?

Hello everyone, Today I am going to share the interesting articles about ng-cloak directive.

1. What is ng-cloak directive?
2. Why we use it?

The ng-cloak directive are use to prevent the un-compiled elements from being displayed and un-compiled elements can be an element that hold and wait for incoming data. i.e.

<div ng-cloack>{{ myCloackVar }}</div>
<div ng-cloack>{{ 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.

I am going to share the example code sample with ng-cloak and without ng-cloak as given below.

Click for live Plnkr Demo
<!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>
    var app = angular.module("myApp", []);
    app.service('getDemoService', function($http) {
      this.getDemoResult = function() {
        return $http({
          method: 'GET',
          url: baseURL + 'Api/AccountPref/Get/' + uid
        });
      };
    });
    app.controller("MyDemoController", function($scope, getDemoService) {
      $scope.resultData = [];
      getDemoService.getDemoResult().then(function(data) {
        var items = data.items;
        angular.forEach(items, function(row) {
          $scope.resultData.push({
            "title": row.title
          });
        });
      });
    });
  </script>
</head>
<body ng-controller="MyDemoController" ng-cloak>
  <div>The ng-cloak example</div>
  <div>
    <div ng-repeat="rslt in resultData">
      {{rslt.title}}
    </div>
  </div>
</body>
</html>
<!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('getDemoService', function($http) {
      this.getDemoResult = function() {
        return $http({
          method: 'GET',
          url: baseURL + 'Api/AccountPref/Get/' + uid
        });
      };
    });

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

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

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

</html>

Live demo,

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.