Post
Ask Question

Understand ngClock Directive in AngularJS

Introduction

The ngCloak directive is used to prevent displaying un-compiled html template while the application is loading in to the browser. Mainly this directive removes the undesirable flicker effect caused by the html template compiled and display. In other words, when we work with the large application sometimes we see {{}} expression until the application page loaded. This directive stops such flickering issue in AngularJS.

Generally, this directive is applied to the "Body" element of HTML page, but this is not a preferred way. Apply multiple ngClock directives to small part of HTML page to display progressive rendering of page in browser. This directive works with the following CSS rules which are embedded within AngularJS library.

  • ng\:cloak
  • ng-cloak
  • ng-cloak
  • x-ng-cloak
  • x-ng-cloak
  • data-ng-cloak

HTML elements which are tagged with "ngCloak" directive are hidden when above CSS rules are loaded into the browser. This directive has been deleted during the HTML template compilation by AngularJS and making these elements visible.

Example

The following is an example without using Cloak directive. While running the page, {{TestData}} expression display in HTML and when whole html is compiled, "Fail" or "Success" is displayed instead of expression.

HTML and Controller

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>ngClock directive in AngularJS</title>  
  6.     <script src="angular.js"></script>  
  7. </head>  
  8.   
  9. <body ng-app="app">  
  10.     <h4>ngClock Example</h4>  
  11.     <div ng-controller="HomeController"> {{TestData}} </div>  
  12.     <script>  
  13.     var app = angular.module("app", []);  
  14.     app.controller("HomeController", function($scope, $http)  
  15.     {  
  16.         $scope.init = function()  
  17.         {  
  18.             $http.get("dummy URL").then(function(result)  
  19.             {  
  20.                 $scope.TestData = "Success";  
  21.             }, function(error)  
  22.             {  
  23.                 $scope.TestData = "Fail";  
  24.             });  
  25.         }  
  26.         $scope.init();  
  27.     });  
  28.     </script>  
  29. </body>  
  30.   
  31. </html>  
Output

output

AngularJS provides the ngClock directive which is used to hide the elements that we do not see on the flash on screen when initial page load (before AngularJS render the data into HTML markup).

Syntax

<ANY ELEMENT ng-cloak>
...
</ANY ELEMENT>

Example
  1. <div ng-controller="HomeController" ng-cloak>   
  2. </div>  
Problem with ngCloak directive

ngCloak directive is preventing to display the content which is not compiled until AngularJS has taken the control and ready to display the data in to HTML templates.

With the HTML large page, result is flicker (shown un-compiled markup on page) because AngularJS is not loaded in the browser and it looks ngCloak is not working.

We can use the following way to avoid this problem,

 

  1. Use ngInclude directive to load Child Content

    ngInclude directive is used to support nesting child templates. It delays in loading the HTML content. This will really help us to remove many HTML templates from main page and AngularJS getting control to hide the markup template content.

  2. Avoid using Expression on markup page

    The issue with expression is displaying original content within curly braces ({{ }}). We can use ngBind directive instead of expression.
    1. //With expression  
    2. < div id = "myTest" > < a href = '#' >  
    3.     {  
    4.         {  
    5.             itemNo  
    6.         }  
    7.     } < /a> < /div>  
    8.     //with ngBind directive  
    9.     < div class = "myTest" > < a href = "#"  
    10. ng - bind = "itemNo" > < /a> < /div>  
  3. Add ngCloak styles manually

    We can also define CSS styles which are injected by AngularJS using code in style sheet. If we do this, styles are immediately applied on the HTML template so that no flickers on page load.

    Define the following style in application style sheet file,
    1. [ng - cloak], .ng - cloak, [data - ng - cloak], [ng\: cloak], [x - ng - cloak], .x - ng - cloak  
    2. {  
    3.     display: none!important;  
    4. }  
    Now it works for.
    1. <div ng-controller="HomeController" ng-cloak>   
    2. </div>  
  4. Hiding the content manually

    Applying CSS explicitly is good choice because we have full control over this. Here idea is very simple, initially hide the HTML template by using inline style or CSS class and when AngularJS has finish its initial process remove inline style or remove hide class from HTML markup. The app.run() function of AngularJS execute when all DOM is ready to display with the data and AngularJS got the control.

    HTML:
    1. <div ng-controller="HomeController" id="example" style="display:none">  
    2. </div>  
    JavaScript
    1. var app = angular.module("app", []);  
    2. app.run(function($rootScope, $location, cellService)  
    3. {  
    4.     $("#example").show();  
    5. });  

Summary

This article will help you to understand ngCloak directive and the problem with this directive and different ways to resolve the issue.


Similar Articles