Angular.js中处理页面闪烁的方法详解

前言

大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{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不会改变。

可以参考:http://www.zgxue.com/article/80523.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()
}
}
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

Angular.js中处理页面闪烁的方法详解的更多相关文章

  1. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  2. vc中调用Com组件的方法详解

    vc中调用Com组件的方法详解 转载自:网络,来源未知,如有知晓者请告知我.需求:1.创建myCom.dll,该COM只有一个组件,两个接口:   IGetRes--方法Hello(),   IGet ...

  3. Java中的equals和hashCode方法详解

    Java中的equals和hashCode方法详解  转自 https://www.cnblogs.com/crazylqy/category/655181.html 参考:http://blog.c ...

  4. 转:Java中的equals和hashCode方法详解

    转自:Java中的equals和hashCode方法详解 Java中的equals方法和hashCode方法是Object中的,所以每个对象都是有这两个方法的,有时候我们需要实现特定需求,可能要重写这 ...

  5. python中验证码连通域分割的方法详解

    python中验证码连通域分割的方法详解 这篇文章主要给大家介绍了关于python中验证码连通域分割的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需 ...

  6. php中读取大文件实现方法详解

    php中读取大文件实现方法详解 来源:   时间:2013-09-05 19:27:01   阅读数:6186 分享到:0 [导读] 本文章来给各位同学介绍php中读取大文件实现方法详解吧,有需要了解 ...

  7. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  8. asp.net页面之间传值方法详解

    asp.net中页面之间传值我们用得最多的就是get,post这两种了,其它的如session,appliction,cookie等这些相对来说少用也不是常用的,只是在特殊情况下在使用了. 1. Ge ...

  9. Laravel5.4框架中视图共享数据的方法详解

    本文实例讲述了Laravel5.4框架中视图共享数据的方法.分享给大家供大家参考,具体如下: 每个人都会遇到这种情况:某些数据还在每个页面进行使用,比如用户信息,或者菜单数据,最基本的做法是在每个视图 ...

随机推荐

  1. Vim技能修炼教程(6) - 行编辑器

    在很久很久以前,计算机的运算能力还很弱,终端与主机的通信也不好.在没有显示器的时代,只能通过电传打字机跟主机通信.那时候只有行编辑器,编辑的时候只能在一行中进行.需要显示哪一行,就把哪一行或者哪几行打 ...

  2. .Net快速获取网络文本文件最后一段文字-小应用

    场景 现在公司的测试环境一些文本日志不让接触,提供一个网络http服务器让人直接访问,这文件大时,一般10MB一个文件,不在同一局域网,网速限制200K,要等很久,访问很慢. .Net代码请求文本文件 ...

  3. 类的初始化__init__使用

    初始化方法: 作用: 对新创建的对象添加属性 语法: class 类名(继承列表): def __init__(self [, 形参列表]): 语句块 [] 代表中的内容可省略 说明: 1. 实始化方 ...

  4. [转](阿里笔试)使用多线程和sleep函数生成字符串的伪随机排列

    http://blog.csdn.net/jiaowopan/article/details/12009079 C/C++(Linux平台) 注意编译连接时需要链接pthread库,即g++ XX.c ...

  5. java区分绝对路径和相对路径

    java区分绝对路径和相对路径 这里要区分的是目录路径 如: /opt/deve/tomcat/bin c:\deve\tomcat\bin 都是绝对目录路径 bin bin/data bin\dat ...

  6. 《DSP using MATLAB》示例Example7.5

    代码: h = [-4, 1, -1, -2, 5, 6, 6, 5, -2, -1, 1, -4]; M = length(h); n = 0:M-1; [Hr, w, b, L] = Hr_Typ ...

  7. Clair:CoreOS发布的开源容器漏洞分析工具

    Clair为何而生:提升安全 软件世界里,安全漏洞会一直存在.好的安全实践意味着要对可能出现的事故未雨绸缪 - 即尽早发现不安全的软件包,并准备好快速进行升级.而Clair就是设计来帮助你找出容器中可 ...

  8. nginx fastcgi 优化

    fastcgi_cache_path /usr/local/nginx/fastcgi_cache levels=1:2 keys_zone=TEST:10m inactive=5m; fastcgi ...

  9. GCC用法

    http://www.cnblogs.com/hibernate6/archive/2010/08/24/2522057.html

  10. c/c++程序设计涉及的一些知识点

    c/c++程序设计涉及的一些知识点 c中的printf函数 main(){ int b = 3; int arr[]= {6,7,8,9,10}; int * ptr = arr; *(ptr++) ...