AngularJS页面访问时出现页面闪烁问题的解决  更新时间:2016年03月06日 14:55:44   作者:小檀   这篇文章主要介绍了AngularJS框架使用中出现页面闪烁问题的解决方法,闪烁问题一般是初始化未加载完毕造成的,需要的朋友可以参考下 我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。 这种情况被叫做Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.下面我们将要介绍几个不同的方式防止这种情况发生在我们的用户身上。 1、ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素: Hello {{ name }} Ng-cloak实现原理为一个directive,页面初始化是在DOM的heade增加一行CSS代码,如下: [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{ Display:none ! important; } [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{ Display:none ! important; } Angular将带有ng-cloak的元素设置为display:none. 在等到angular解析到带有ng-cloak节点的时候,会把元素上ng-cloak  attribute和calss同时remove掉,这样就防止了节点的闪烁。如下: 2、ng-bind ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上; 使用ng-bind替代{{  }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。 上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了 Hello 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处理页面闪烁的解决方法 AngularJS使用ng-Cloak阻止初始化闪烁问题的方法 Angularjs在初始化未完毕时出现闪烁问题的解决方法分析 AngularJS 防止页面闪烁的方法 Angular 闪烁 相关文章 关于angular浏览器兼容性问题的解决方案 这篇文章主要给大家介绍了关于angular浏览器兼容性问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-07-07 angular5 httpclient的示例实战 本篇文章主要介绍了angular5 httpclient的示例实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 Angular Renderer (渲染器)的具体使用 这篇文章主要介绍了Angular Renderer (渲染器)的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 玩转Koa之koa-router原理解析 本文将要分析的是经常用到的路由中间件 — koa-router,详细的介绍了koa-router概述和实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 Angular7中创建组件/自定义指令/管道的方法实例详解 这篇文章主要介绍了在angular7中创建组件/自定义指令/管道的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下 2019-04-04 AngularJS 与Bootstrap实现表格分页实例代码 这篇文章主要介绍了AngularJS 与Bootstrap实现表格分页的相关资料,并附实例代码和实现效果图,需要的朋友可以参考下 2016-10-10 AngularJs导出数据到Excel的示例代码 本篇文章主要介绍了AngularJs导出Excel的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 详解使用angularjs的ng-options时如何设置默认值(初始值) 本篇文章主要介绍了详解使用angularjs的ng-options时如何设置默认值(初始值),具有一定的参考价值,有兴趣的可以了解一下 2017-07-07 angularJS结合canvas画图例子 这篇文章主要介绍了angularJS结合canvas画图例子的方法,需要的朋友可以参考下 2015-02-02 完美解决UI-Grid表格元素中多个空格显示为一个空格的问题 下面小编就为大家带来一篇完美解决UI-Grid表格元素中多个空格显示为一个空格的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 最新评论

我们知道在应用的页面或者组件需要加载数据时,浏览器和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>

Ng-cloak实现原理为一个directive,页面初始化是在DOM的heade增加一行CSS代码,如下:

<pre class= “prettyprint linenums”>

  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{

  Display:none ! important;

}

</pre>

<pre class= “prettyprint linenums”>
 
  [ng\:cloak],[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
 
  Display:none ! important;
 
}
 
</pre>


Angular将带有ng-cloak的元素设置为display:none.

在等到angular解析到带有ng-cloak节点的时候,会把元素上ng-cloak  attribute和calss同时remove掉,这样就防止了节点的闪烁。如下:

<script type =”text/ng-template” id =”scenario.js-150”>

  It(‘should remove the template directive and css class',function(){

 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))

  not().toBeDefined();

   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).

Not().toBeDefined();

});

</script>

<script type =”text/ng-template” id =”scenario.js-150”>
 
  It(‘should remove the template directive and css class',function(){
 
 Expect(element(‘.doc-example-live #template1').attr(‘ng-cloak'))
 
  not().toBeDefined();
 
   Expect(element(‘.doc-example-live #template2').attr(‘ng-cloak')).
 
Not().toBeDefined();
 
});
 
</script>

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处理页面闪烁的解决方法
  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
  • AngularJS 防止页面闪烁的方法
张贴在3