Angularjs uses Ng-cloak to prevent initialization of flicker problems _ANGULARJS

The example in this article describes how Angularjs uses Ng-cloak to prevent initialization of flicker problems. Share to everyone for your reference, specific as follows:

When doing angular spa development, we often encounter expressions ({% RAW%} {{Express}} {% Endraw%}) in browsers such as chrome that can be quickly parsed, or a module (DIV) flicker. For this problem, because JavaScript is going to manipulate the DOM, it waits for the DOM to be loaded (DOM ready). For angular to go back to parsing the HTML view Template at the end of the DOM ready, you'll see a flicker in the fast browsers such as Chrome. This is not the case for most cases of slow-resolution browsers such as ie7,8.

In angular we provide ng-cloak to prevent flicker , and we only need to add ng-cloak where needed. Also, for Bing text ({% raw%}{{express}} {% Endraw%}) we can change it to ng-bind to avoid it.

<div id= "template1" ng-cloak>{{' Hello '}}</div> <div "id=" Template2 ng-cloak "class="
> {% RAW%} {{' Hello IE7 '}} {% Endraw%} </div>
<div id= "Template2" ng-bing= "' Hello IE7 '" ></div>

Angular implements Ng-cloak as a directive and adds a line of CSS code to the DOM's Heade at initialization time, as follows:

Copy Code code as follows:

@charset "UTF-8"; [Ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none!important;} Ng\:form{display:block}. Ng-animate-start{clip:rect (0,auto,auto,0);-ms-zoom:1.0001;}. Ng-animate-active{clip:rect ( -1px,auto,auto,0);-ms-zoom:1;}

From the above we can see the angular with ng-clock elements set to Display:none, hidden away, wait until angular resolution to the node with Ng-clock, will attribute and class simultaneously removed, This enables the node to be prevented from blinking.

var ngcloakdirective = ngdirective ({
   compile:function (element, attr) {
    attr. $set (' Ngcloak ', undefined);
    Element.removeclass (' Ng-cloak ');
   }
);

You'll see this code in Angular-bootstrap.js to add the previous CSS:

Copy Code code as follows:

document.write (' <link rel= "stylesheet" type= "Text/css" href= "' + Serverpath + '. /css/angular.css "/>");

It seems that the flashing problem seems to have been able to be solved by me, well whether this is the case, the theory also changed so, but the reality is cruel, our perceptual knowledge will often be the reality of a heavy slap, we can be a more in-depth and comprehensive thinking, What if the browser's speed is faster than angular's CSS in the head? I met this problem when I addressed this flashing question to a project team in the company. What do we do? Then we can only use our will kill technology, their own CSS to join our CSS file into the Heade, start loading, ok so it can be solved perfectly. (If you've also met a ng-cloak that doesn't work, try introducing a CSS file directly)

Here are the principles and solutions for Ng-cloak.

I hope this article will help you to Angularjs program design.