Angularjs处理页面闪烁的解决方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angularjs处理页面闪烁的解决方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3031字，纯文字阅读大概需要5分钟。

内容图文

摘要

在使用{{}}绑定数据的时候，页面加载会出现满屏尽是{{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不会改变。

可以参考

//www.gxlcms.com/article/107905.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()
  }
 }
 })

内容总结

以上是互联网集市为您收集整理的Angularjs处理页面闪烁的解决方法全部内容，希望文章能够帮你解决Angularjs处理页面闪烁的解决方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---