[Angularjs]处理页面闪烁的方法
摘要
在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况。数据还没响应,但页面已经渲染了。这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}。这种情况被叫做“Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.”。
问题
为了图方便,我们很喜欢使用下面的做法
<div>
{{name}}
</div>
但这也为满屏尽是{{}}埋下了坑。当接口,网络响应速度够快的情况下,很难发现这个问题,但放在移动端4g或者网络环境更差的情况下,这个问题就会频发。
解决办法
1、ng-cloak
该指令是angularjs的内置的指令,它的作用是隐藏所有被它包含的元素。在浏览器加载和编译渲染完成后,angularjs会自动删除ngCloak元素属性,这样这个元素就会变为可见的。
<div ng-cloak>
{{name}}
</div>
2、ng-bind
该指令是angularjs内置的用于绑定页面数据的指令。可以使用该指令代替{{}}的方式绑定数据到页面上。使用ng-bind可以防止未被渲染的{{}}展示给用户。如下所示:
<div ng-bind="name">
</div>
3、resolve
当使用routes路由的时候,resolve可以防止我们在route路由被完全加载之前获取我们需要加载的数据,当数据被加载成功之后,路由再改变而页面也会呈现给用户,数据没有加载成功route不会改变。
可以参考
https://my.oschina.net/tanweijie/blog/295255
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可以作为可注入的依赖:
ngular.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的方式了:
ngular.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()
}
}
})
资料
https://my.oschina.net/tanweijie/blog/295255
最新文章
- css-display:none和visibility:hidden的不同
- gulp插件gulp-ruby-sass和livereload插件
- 云计算的三层SPI模型
- .net学习之类与对象、new关键字、构造函数、常量和只读变量、枚举、结构、垃圾回收、静态成员、静态类等
- Using the Repository Pattern with ASP.NET MVC and Entity Framework
- fcntl记录锁实例
- maven提示错误的解决办法
- MVC 部分视图
- Linux下忘记rootpassword怎么办?
- 初次使用git配置以及git如何使用ssh密钥(将ssh密钥添加到github)
- css3新特性---(border,Background部分)
- Phonegap开发相关问题
- 手把手的SpringBoot教程,SpringBoot创建web项目(一)
- 洞见世界(1): 拉勾网大数据告诉你, 会计最高月薪达33k!
- Ubuntu14.04安装配置星际译王词典
- DNS服务详解
- Kaldi nnet3的fastlstm与标准LSTM
- drupal笔记
- 关于android 内存的笔记
- 第一次php之旅