Monday, 7 January 2019

AngularJS ng-cloack directive

AngularJS ng-cloack directive

ng-cloack directive is used to prevent to show the angular code while page is loading.
 ng-cloak does not work if page will be larger because JS not being loaded till that time.
 For this you need to add some css with ng-cloack to prevent the page flicking.

<!DOCTYPE html>
    <title>ng-cloak Example</title>
    <script src=""></script>

        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
            display: none !important;
    <div ng-app="myApp1" ng-controller="Employee1Controller">
                    <th>Available Time</th>
                <tr ng-repeat="item in weekData" ng-cloak>

    var myapp = angular.module('myApp1', []);
    myapp.controller('Employee1Controller', function ($scope) {
        $scope.weekData = [{ day: "Friday", hours: "5:00pm to 12:00am" },
                           { day: "Wednesday", hours: "5:00pm to 11:00pm" },
                           { day: "Sunday", hours: "11:00am to 11:00pm" },
                           { day: "Thursday", hours: "5:00pm to 11:00pm" },
                           { day: "Saturday", hours: "11:00am to 12:00am" }



  1. I hope you will share such type of impressive contents again with us so that we can utilize it and get more advantage.
    wikipedia reference