Here we will learn ng-cloak directive in angularjs with the example, use of angularjs ng-cloak directive and how to use ng-cloak directive in angularjs application with simple example.
The ng-cloak directive in angularjs is a special type of directive which is used to prevent showing an un-compiled form of elements while page is loading. We can say that ng-cloak directive will hold and wait till operations complete to show the elements on page.
By using ng-cloak directive in angularjs, we can prevent or avoid undesirable flicker effect to display elements on page. We can use ng-cloak
directive with <body>
element or we can use it in a required portion of HTML elements.
Following is the syntax of using ng-cloak directive in angularjs applications.
Now we will see how to use ng-cloak
directive with a simple example.
Following is the example of using ng-cloak directive in angularjs applications.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs ng-cloak Directive Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularngcloakApp", []);
app.controller("ngcloakctrl", function ($scope) {
$scope.name = "Tutlane.com";
$scope.users = {
isValid: true
};
});
</script>
</head>
<body ng-app="AngularngcloakApp">
<div ng-controller="ngcloakctrl">
<div ng-cloak ng-if="users.isValid">
{{ name}}
</div>
</div>
</div>
</body>
</html>
In the above code sample, ng-cloak
directive prevent to display un-compiled user name till it finish required conditions check and page loading. In case if we didn't use ng-cloak then output will display {{ name }} raw code till it finish all conditions. If we use ng-cloak the output will display as blank till it display all the values.
Following is the result of ng-cloak directive example in angularjs. It will display user name once page loading and condition checking are done.
This is how we can use ng-cloak directive in angularjs to prevent showing un-complied code till page loads completely.