AngularJS ng-cloak Directive

The AngularJS ng-cloak directive is used to prevent the document from showing incomplete AngularJS code while your application is loading. This directive also prevents the undesirable flicker effects caused by the HTML template display when the application is being loaded.

This is supported by all HTML elements.

Syntax:

Let's take an example to demonstrate ng-cloak directive.

See this example:

Example1:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p ng-cloak>{{ 50 + 5 + 5 -10 }}</p>
<p><b>Note:</b> This is small example so it would probably not flicker even without the ng-cloak directive, but it specifies how to include the directive on an HTML element.</p>
</div>
</body>
</html>

Test it Now

Example2:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ng-cloak directive example</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
</head>
<body ng-app="">
  <div id="template1" ng-cloak>{{ "Hello" }}</div>
<div id="template2" class="ng-cloak">{{ "JavaTpoint" }}</div>
</body>
</html>

Test it Now

Next TopicAngularJS ng-controller Directive

← prev next →