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 程序执行与顺序实现详解
May 13 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
详解vue v-model
Aug 31 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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版单点登陆实现方案的实例
2016/11/17 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP _construct()函数讲解
2019/02/03 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
python版简单工厂模式
2017/10/16 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
UDP协议功能
2013/01/06 面试题
社团活动策划书范文
2014/01/09 职场文书
大四自我鉴定
2014/02/08 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
开学寄语大全
2014/04/08 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书