NgCloak best practices for angular initialization and flashing

When developing angular SPA, we often see expressions ({% raw % }{{ express }}{% endraw %}) on browsers such as Chrome that can be quickly parsed, or modules (div). For this problem, JavaScript will wait for DOM loading to complete DOM ready ). Angular will go back to parse the html view Template after DOM ready is complete, so you will see flashes in fast browsers such as Chrome. For IE 7 and 8 browsers with a low resolution speed, this problem will not occur in most cases.

In angular, ng-cloak is provided for us to implement textile flash. We only need to add ng-cloak as needed. We can also change bing text ({% raw % }{{ express }}{% endraw %}) to ng-bind to avoid this.

<div id="template1" ng-cloak>{{ 'hello' }}</div><div id="template2" ng-cloak class="ng-cloak">{{  'hello IE7' }}</div><div id="template2" ng-bing="'hello IE7'"></div>

Angular describes the implementation of ng-cloak as a directive, and adds a line of css code in the DOM heade during initialization, as shown below:

<style type="text/css">@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;}</style>

From the above we can see that angular sets the element with ng-clock to display: none and hides it. When angular resolves it to a node with ng-clock, will remove attribute and class at the same time, so as to prevent the node from flashing.

var ngCloakDirective = ngDirective({      compile: function(element, attr) {        attr.$set('ngCloak', undefined);        element.removeClass('ng-cloak');      }});

In the angular-bootstrap.js, you will see code like this to add the css mentioned above:

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

It seems that the flickering problem has been solved by me. Whether it is like this or not, the theory has changed, but the reality is cruel, our perceptual knowledge is often slapped by reality, so that we can think deeply and comprehensively. What if the browser is faster than angular's adding css to the head? I met this problem when I solved this flickering problem for a project team in the company. What should we do? Then we can only make sure that we are the only killer. We can add css to our css file and introduce it to heade to start loading. OK can solve the problem perfectly. (If ng-cloak does not work, try introducing the css file)

The principles and Solutions of ng-cloak have been completed. You are welcome to continue with angular's subsequent experiences.

This article from the "wolf" blog, please be sure to keep this source http://whitewolfblog.blog.51cto.com/3973901/1346222