AngularJS页面访问时出现页面闪烁问题的解决
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS页面访问时出现页面闪烁问题的解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4216字，纯文字阅读大概需要7分钟。
内容图文
我们知道在应用的页面或者组件需要加载数据时，浏览器和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页面访问时出现页面闪烁问题的解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。