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://www.jb51.net/article/107905.htm
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()
}
}
})
相关文章
这篇文章主要介绍了Angularjs中使用轮播图指令swiper的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2017-05-05
前端开发中，为了对列表项进行快捷操作，有时就添个按钮来简单实现。但是，有时会发现按钮影响美观，甚至影响列表行的布局。稍在网上搜索无果，而写此仿苹果滑屏删除控件2016-01-01
这篇文章主要介绍了AngularJS 过滤与排序，这里整理了详细的资料及简单实例代码，有需要的小伙伴可以参考下2016-09-09
Angular.js中$resource高大上的数据交互详解
这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
本文给大家介绍angularjs验证重复密码的两种方法，每种方法都有各自的优缺点，大家可以根据需要选择一种方法，具体内容详情大家通过本文详细了解下吧2016-11-11
本篇文章主要介绍了Angular实现双向折叠列表组件的示例代码，分为左右两组，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
这篇文章主要介绍了Angular实现的内置过滤器orderBy排序与模糊查询功能,涉及AngularJS过滤器、排序及字符串遍历、查询等相关操作技巧,需要的朋友可以参考下2017-12-12
本文主要介绍AngularJS ng-show 指令,这里对ng-show 指令的基础知识做了详细介绍,并附有代码示例,希望能帮助学习AngularJS的同学2016-08-08
这篇文章主要为大家详细介绍了angularjs实现多张图片上传并预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
resolve保证了数据获取后再进行路由跳转，防止因为数据延迟而出现短暂的空组件情况，本文就介绍一下Angular resolve基础用法，感兴趣的小伙伴们可以参考一下2018-10-10
最新评论