Here we will learn ng-cloak directive in Angular JS and a simple example of the ng-cloak directive. Angular Js provides a special type of directive which is used to prevent the document from showing incomplete Angular Js code while your application is loading.

What is ng-cloak directive in Angular JS?

Angular Js provides a special type of directive which is used to prevent the document from showing incomplete Angular Js code while your application is loading.
The ng-cloak directive also prevent the application from showing some undesirable flcker effect while the application is loading.

Systax:

<element ng-cloak></element>

Where element can be any html element like <p>, <div> etc.

Example:

<!DOCTYPE html>
<html>

<title>

Angular JS Example

</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">

<p ng-cloak>{{ 10 + 5 }}</p>

<p>

The example will show how can we prevent our application from showing  incomplete Angular Js code while the application is loading.

</p>

</div>

</body>
</html>

View More:

Conclusion:

I hope this is a useful tutorial for you. Please don’t hesitate to comment for any technical help. Your feedback and comments are appreciated.

Thank You.

Leave a Comment