AngularJS中怎么防止页面闪烁，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1、ng-cloak
ng-cloak指令是angular的内置指令，它的作用是隐藏所有被它包含的元素：
<div ng-cloak>
<h2>Hello {{ name }}</h2>
</div>在浏览器加载和编译渲染完成之后，angular会自动删除ngCloak元素属性，这样这个元素就会变成可见的。
在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak class
<div ng-cloak class="ng-cloak">
<h2>Hello {{ name }}</h2>
</div>2、ng-bind
ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上；
使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了，使用ng-bind渲染的空元素替代{{ }}会显得友好很多。
上面的例子可以重写成下面那样，这样就可以防止页面出现{{ }}了
<div>
<h2>Hello <span ng-bind="name"></span></h2>
</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中怎么防止页面闪烁问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
