4、AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案

阅读() @2019-03-17 16:05:12

使用AngularJs获取数据之后,可以使用双花括号表达式或者是ng-bind指令把数据添加到html中,但是这里涉及到一个前端页面渲染与性能的问题。

如果把js文件放在head头部,这时用户网络不好或者是js文件太大一时加载不完,就会出现页面混乱的局面。所以,一般情况下,我们是把js文件放在html页面的底部,等html和css加载完成之后再来执行js代码,但是在body体中要从Angular中获取数据,否则,网络一卡,用户会看到两个花括号{{]},而没有任何数据,这种想象称为“闪屏”,下面是具体的解决方法:

使用ng-cloak指令,先把页面隐藏,等angular代码加载完成之后,再把html代码显示出来:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			.ng-cloak{display:none;}
		</style>
	</head>
	<body>
		<div ng-app='app' ng-controller='ctrl' ng-cloak class="ng-cloak">
			{{name}}
			<br/>
			<p ng-bind="name"></p>
		</div>
	</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.name = '赵一鸣';
	}]);
</script>

双花括号和ng-bind各有优势,比如:

双花括号中方便连接字符串,不用担心单引号和双引号的问题:

{{name + '正在学习AngularJs'}}

使用ng-bind连接字符串容易出错,需要注意单双引号的问题,而且字符串太多的话,页面不美观:

<p ng-bind="name+'正在学习AngularJs'"></p>

所以,需要根据实际情况来选择表达式或指令!

微信二维码