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文件的小脚本
Jun 28 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue-cli3 热更新配置操作
Sep 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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
python实现红包裂变算法
2016/02/16 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
高中政治教学反思
2014/01/18 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
社团个人总结范文
2015/03/05 职场文书
投资合作意向书范本
2015/05/08 职场文书
故意伤害罪辩护词
2015/05/21 职场文书