Wednesday, July 29, 2015

Prevent Flickering of AngularJS page load using ng-clock

Flickering is a common problem of DOM manipulation using AngularJS. If page is huge then it shows “{{}}” braces before manipulation of DOM. Anyway, the solution is very simple.

ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your 
views.

      1)      Add ng-clock directive to your page root element. One perfect position may be <body> tag of page or root <div> element.
<div ng-cloak>

      2)      Apply below style sheet to apply style of ng-clock class.  

<style>
    
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
</style>

       And your problem is solved !.


2 comments:

  1. Great Article android based projects

    Java Training in Chennai

    Project Center in Chennai

    Java Training in Chennai

    projects for cse

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete