AngularJS 防止页面闪烁的方法


Posted in Javascript onMarch 09, 2017

我们知道在应用的页面或者组件需要加载数据时,浏览器和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 防止页面闪烁的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
小程序实现列表删除功能
Oct 30 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
js读取json文件片段中的数据实例
Mar 09 #Javascript
JavaScript实现动态增删表格的方法
Mar 09 #Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP函数常用用法小结
2010/02/08 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
NumPy排序的实现
2020/01/21 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
超市业务员岗位职责
2013/12/05 职场文书
小区推广策划方案
2014/06/06 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
党支部评议意见
2015/06/02 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫