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>

6 comments:

  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

    ReplyDelete
  2. Greetings! I know this is kinda off topic but I was wondering which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform. nyc web designer

    ReplyDelete
  3. I would like to show my gratitude for your kindness for people that absolutely need help with this particular content. Your very own dedication to getting the message all-around became particularly good and have in most cases encouraged girls much like me to achieve their goals. This informative guideline implies so much to me and much more to my office colleagues. Thanks a lot; from each one of us. website design company nyc

    ReplyDelete
  4. Rattling clean web site , appreciate it for this post. san francisco design agency

    ReplyDelete
  5. I am glad to be a visitant of this gross web blog ! , regards for this rare info ! . brand identity design agency

    ReplyDelete