AngularJS 防止页面闪烁的方法
2015-06-19 10:02
323 查看
原文网址:http://my.oschina.net/tanweijie/blog/295255
摘要 翻译,原文链接:http://www.ng-newsletter.com/advent2013/#!/day/3
Angular
目录[-]
1、ng-cloak
2、ng-bind
3、resolve
我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:
?
在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的。
在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class
?
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{
}}的形式绑定元素到页面上;
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了
?
当在不同的页面之间使用routes(路由)的时候,我们有另外的方式防止页面在数据被完全加载到route之前被渲染。
在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的方式了:
?
摘要 翻译,原文链接:http://www.ng-newsletter.com/advent2013/#!/day/3
Angular
目录[-]
1、ng-cloak
2、ng-bind
3、resolve
我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
1、ng-cloak
ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:?
在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class
?
2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{}}的形式绑定元素到页面上;
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了
?
3、resolve
当在不同的页面之间使用routes(路由)的时候,我们有另外的方式防止页面在数据被完全加载到route之前被渲染。在route(路由)里使用resolve可以让我们在route(路由)被完全加载之前获取我们需要加载的数据。当数据被加载成功之后,路由就会改变而页面也会呈现给用户;数据没有被加载成功route就不会改变, the $routeChangeError event
will get fired.【$routeChangeError事件就(不)会被激活?】
?
resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
当路由加载的时候,resolve参数里的keys可以作为可注入的依赖:
?
?
首先,看一下accountService,
?
?
相关文章推荐
- 详细解读AngularJS中的表单验证编程
- 使用AngularJS编写较为优美的JavaScript代码指南
- 使用AngularJS编写较为优美的JavaScript代码指南
- 详细解读AngularJS中的表单验证编程
- 详细分析使用AngularJS编程中提交表单的方式
- 使用AngularJS处理单选框和复选框的简单方法
- 使用ngView配合AngularJS应用实现动画效果的方法
- 测试IE浏览器对JavaScript的AngularJS的兼容性
- 使用AngularJS和PHP的Laravel实现单页评论的方法
- 举例详解AngularJS中ngShow和ngHide的使用方法
- 使用AngularJS实现表单向导的方法
- 使用AngularJS实现可伸缩的页面切换的方法
- 移除AngularJS下URL中的#字符的方法
- AngularJs学习笔记(制作留言板)
- angularjs中 *.min.js.map 404的问题
- 初次使用AngularJS中的ng-view,路由控制
- 使用Chrome浏览器调试AngularJS应用的方法
- 使用AngularJS创建自定义的过滤器的方法
- 深入讲解AngularJS中的自定义指令的使用
- 3个可以改善用户体验的AngularJS指令介绍