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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python队列的定义与使用方法示例
2017/06/24 Python
一份python入门应该看的学习资料
2018/04/11 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python 实现微信防撤回功能
2019/04/29 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python可以用哪些数据库
2020/06/22 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
兼职学生的自我评价
2013/11/24 职场文书
本科毕业生自荐信
2014/06/02 职场文书
运动会通讯稿600字
2015/07/20 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python