AngularJS页面访问时出现页面闪烁问题的解决
我们知道在应用的页面或者组件需要加载数据时,浏览器和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() } } }) });
相关文章
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
- 这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
- 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下...2016-10-03
- 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下...2016-04-23
- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01
- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。...2017-03-13
- 这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下...2016-02-21
- 这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 在本篇内容里我们给大家整理了关于C#中使用angular的方法以及具体步骤内容,有兴趣的朋友们学习下。...2020-06-25
- 这篇文章主要给大家介绍了关于angular浏览器兼容性问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
AngularJS使用angular-formly进行表单验证
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下...2015-12-29Angular directive递归实现目录树结构代码实例
本篇文章主要介绍了Angular directive递归实现目录树结构代码实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ...2017-05-09- 这篇文章主要介绍了AngularJS的脏检查深入分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27
- 这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下...2016-03-07
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
这篇文章主要介绍了Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例,具有一定的参考价值,有兴趣的可以了解一下。...2017-01-26