AngularJS 防止页面闪烁的方法
来源:互联网 发布:淘宝网运费模版 编辑:程序博客网 时间:2024/05/16 18:39
我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。
这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。
1、ng-cloak
ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:
<div ng-cloak>
<h1>Hello {{ name }}</h1>
</div>
在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的。
在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class
<div ng-cloak class=
"ng-cloak"
>
<h1>Hello {{ name }}</h1>
</div>
2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上;
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了
<div>
<h1>Hello <span ng-bind=
"name"
></span></h1>
</div>
3、resolve
当在不同的页面之间使用routes(路由)的时候,我们有另外的方式防止页面在数据被完全加载到route之前被渲染。
在route(路由)里使用resolve可以让我们在route(路由)被完全加载之前获取我们需要加载的数据。当数据被加载成功之后,路由就会改变而页面也会呈现给用户;数据没有被加载成功route就不会改变, the $routeChangeError event will get fired.【$routeChangeError事件就(不)会被激活?】
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {
$routeProvider
.when(
'/account'
, {
controller:
'AccountCtrl'
,
templateUrl:
'views/account.html'
,
resolve: {
// We specify a promise to be resolved
account:
function
($q) {
var
d = $q.defer();
$timeout(
function
() {
d.resolve({
id: 1,
name:
'Ari Lerner'
})
}, 1000);
return
d.promise;
}
}
})
});
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可以作为可注入的依赖:
angular.module(
'myApp'
)
.controller(
'AccountCtrl'
,
function
($scope, account) {
$scope.account = account;
});
我们同样可以使用resolve key传递$http方法返回的结果,as $http returns promises from it's method calls:
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {
$routeProvider
.when(
'/account'
, {
controller:
'AccountCtrl'
,
templateUrl:
'views/account.html'
,
resolve: {
account:
function
($http) {
return
$http.get(
'http://example.com/account.json'
)
}
}
})
});
推荐定义一个独立的service的方式来使用resolve key,并且使用service来相应返回所需的数据(这种方式更容易测试)。要这样处理的话,我们需要创建一个service:
首先,看一下accountService,
angular.module(
'app'
)
.factory(
'accountService'
,
function
($http, $q) {
return
{
getAccount:
function
() {
var
d = $q.defer();
$http.get(
'/account'
)
.then(
function
(response) {
d.resolve(response.data)
},
function
err(reason) {
d.reject(reason);
});
return
d.promise;
}
}
})
定义好service之后我们就可以使用这个service来替换上面代码中直接调用$http的方式了:
angular.module(
'myApp'
, [
'ngRoute'
])
.config(
function
($routeProvider) {
$routeProvider
.when(
'/account'
, {
controller:
'AccountCtrl'
,
templateUrl:
'views/account.html'
,
resolve: {
// We specify a promise to be resolved
account:
function
(accountService) {
return
accountService.getAccount()
}
}
})
});
以上所述是小编给大家介绍的AngularJS 防止页面闪烁的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
原文链接:https://my.oschina.net/tanweijie/blog/295255
- AngularJS 防止页面闪烁的方法
- AngularJS 防止页面闪烁的方法
- 一些防止闪烁的方法
- 防止窗口闪烁的方法
- 防止窗口闪烁的方法
- 经验总结之防止窗口闪烁的方法
- 经验总结之防止窗口闪烁的方法
- 经验总结之防止窗口闪烁的方法
- 防止CListCtrl闪烁的几种方法
- 防止CListCtrl闪烁的几种方法
- 自绘CListCtrl防止闪烁的方法
- 防止CListCtrl闪烁的几种方法
- 防止CListCtrl闪烁的几种方法
- 自绘CListCtrl防止闪烁的方法
- 经验总结之防止窗口闪烁的方法
- 防止CListCtrl闪烁的几种方法
- 防止CListCtrl闪烁的几种方法
- 防止CListCtrl闪烁的几种方法
- CAP理论十二年回顾:"规则"变了
- QT
- java中的BigDecimal和String的相互转换
- 训练集样本不平衡问题对CNN的影响
- coreldraw做倒影总会让人发现有意想不到的效果呈现出来
- AngularJS 防止页面闪烁的方法
- 第六章图像滤波低通滤波器
- 单源最短路径问题
- okhttp源码分析(二)-RetryAndFollowUpInterceptor过滤器
- 浅谈UML的概念和模型之UML九种图
- 第四周第一节课(第三章——栈和队列)
- 渗透测试常规流程
- AWT 实现计算器 界面 设计
- git学习