Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Use of ng-cloak in AngularJS

    @shubham.mamgain
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 536
    Comment on it

    Hi All,

    When we use AngularJS in any of our page, while rendering it on browser we happen to see flicker in HTML with uncompiled raw html. And once the AngularJS is compiled then it will show the compilled output. To avoid this flickering we can use ng-cloak.

    To use ng-cloak:

    Step 1 - Add CSS in style sheet at header level:

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none !important;
}

    This will hide all the html elements which are tagged with ng-cloak directive. While compilation angularjs will make the ng-cloak directive element visible.

    ng-cloak directive is suggested to be applied in multiple small portions of the html page to permit progressive rendering of the browser view.

    Sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
        {
            display: none !important;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <div id="template1" ng-cloak>
            {{ inputnumber }}</div>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.inputnumber = 1231215.22;
        });
    </script>
</body>
</html>

     

    Happy Coding...

    .net AngularJS AngularJS directives ng-cloak
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: