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


Posted in Javascript onMarch 09, 2017

前言

大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{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://3water.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()
 }
 }
 })

总结

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

Javascript 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
javascript版2048小游戏
Mar 18 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
You might like
PHP脚本数据库功能详解(中)
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vue 如何使用递归组件
2020/10/23 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
学习十八大报告感言
2014/02/04 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
学前班学生评语
2014/12/29 职场文书
年会邀请函范文
2015/01/30 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers