我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
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;
}
Angular将带有ng-cloak的元素设置为display：none.
在等到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();
});
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了
在route（路由）里使用resolve可以让我们在route（路由）被完全加载之前获取我们需要加载的数据。当数据被加载成功之后，路由就会改变而页面也会呈现给用户；数据没有被加载成功route就不会改变， the $routeChangeError event will get fired.【$routeChangeError事件就（不）会被激活？】
resolve 项需要一个key/value对象，key是resolve依赖的名称，value可以是一个字符串（as a service）或者一个返回依赖的方法。
resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
当路由加载的时候，resolve参数里的keys可以作为可注入的依赖：
我们同样可以使用resolve key传递$http方法返回的结果，as $http returns promises from it's method calls:
推荐定义一个独立的service的方式来使用resolve key，并且使用service来相应返回所需的数据（这种方式更容易测试）。要这样处理的话，我们需要创建一个service：
首先，看一下accountService，
定义好service之后我们就可以使用这个service来替换上面代码中直接调用$http的方式了：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。