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.

Example:-
<!DOCTYPE html>
<html>
<head>
    <title>ng-cloak Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <style>
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body>
    <div ng-app="myApp1" ng-controller="Employee1Controller">
        <table>
            <thead>
                <tr>
                    <th>Days</th>
                    <th>Available Time</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in weekData" ng-cloak>
                    <td>{{item.day}}</td>
                    <td>{{item.hours}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>
<script>
    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" }
        ];

    });
</script>

No comments:

Post a Comment