Angular页面加载闪现解决方案 ng-cloak

在做Angular项目时，经常会遇见在浏览器上闪烁表达式({{ express }} ),及模块(div)的闪烁，会闪现/闪烁隐藏的数据，之前用过vue.js，可以通过v-clock解决，同理Angular也可以通过ng-cloak来实现防止闪烁的方案。

<div id="template1" ng-cloak>河马家</div>
<div id="template2" ng-cloak> {{hema}}</div>
<div id="template3" ng-bing="'hello Hema'"></div>

我们只需要在需要的地方加上ng-cloak，对于bing文字({{ express }} )我们也可以改为ng-bind来实现避免。

ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

ng-cloak实现为一个directive，并会在初始化的时候在DOM的head增加一行css代码，如下：

<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(,auto,auto,);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,);-ms-zoom:;}
</style>

从上面代码可见angular将带有ng-clock的的元素设置为display:none，隐藏掉，在等到angular解析到带有ng-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防止节点的闪现/闪烁。

一般情况下，到此就可以解决闪现的问题了，但是如果浏览器的速度比angular在head中加入css的速度还快，问题依旧。

这时需要自己把上面那段css加入我们的css文件引入head，启动加载就可以完美解决闪烁问题！