AngularJS ng-cloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. It can be used in two ways
- Using ng-cloak attribute
<div ng-cloak>{{ 'hello' }}</div>
- Using class ng-cloak
<div class="ng-cloak">{{ 'hello' }}</div>
For the best result, the angular.js script must be loaded in the head section of the html document.
Example
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <div ng-app="myApp" ng-controller='MyCtrl'> <input ng-model="name" ng-init="name='John'"><br> <div ng-cloak>name: {{name}}</div> </div> <script> var module = angular.module('myApp', []); module.controller('MyCtrl', function($scope) {}); </script>