AngularJS页面访问时出现页面闪烁问题的解决
前端之家收集整理的这篇文章主要介绍了
AngularJS页面访问时出现页面闪烁问题的解决，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_301_0@我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。
@H_
301_0@
这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的
用户身上。
@H_
301_0@
1、ng-cloak
ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：
Hello {{ name }}
@H_
301_0@Ng-cloak实现原理为一个directive，
页面初始化是在DOM的heade
增加一行CSS
代码，如下：
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{
Display:none ! important;
}
<pre class= “prettyprint linenums”>
[ng\:cloak],.x-ng-cloak{
Display:none ! important;
}
@H_
301_0@Angular将带有ng-cloak的元素设置为display：none.
@H_
301_0@在等到angular解析到带有ng-cloak节点的时候，会把元素上ng-cloak attribute和calss同时remove掉，这样就防止了节点的闪烁。如下：
It(‘should remove the template directive and css class',function(){
Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
not().toBeDefined();
Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
Not().toBeDefined();
});
@H_
301_0@
@H_
301_0@
2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定
页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到
页面上；
@H_
301_0@使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给
用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
@H_
301_0@上面的例子可以重写成下面那样，这样就可以防止
页面出现{{ }}了
Hello
@H_
301_0@
3、resolve
当在不同的
页面之间使用routes（路由）的时候，我们有另外的方式防止
页面在数据被完全加载到route之前被渲染。
@H_
301_0@在route（路由）里使用resolve可以让我们在route（路由）被完全加载之前
获取我们需要加载的数据。当数据被加载成功之后，路由就会改变而
页面也会呈现给
用户；数据没有被加载成功route就不会改变， the $routeChangeError event will get fired.【$routeChangeError事件就（不）会被激活？】
@H_
301_0@resolve 项需要一个key/value对象，key是resolve依赖的
名称，value可以是一个字符串（as a service）或者一个返回依赖的
方法。
@H_
301_0@resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
@H_
301_0@当路由加载的时候，resolve参数里的keys可以作为可注入的依赖：
@H_
301_0@我们同样可以使用resolve key传递$http
方法返回的结果，as $http returns promises from it's method calls:
@H_
301_0@推荐定义一个独立的service的方式来使用resolve key，并且使用service来相应返回所需的数据（这种方式更容易测试）。要这样处理的话，我们需要创建一个service：
@H_
301_0@首先，看一下accountService，
@H_
301_0@定义好service之后我们就可以使用这个service来替换上面
代码中直接
调用$http的方式了：
