听说我应该将script标签放在结束body标签之前。但是,当我这样做时,由于某种原因,我的angularJS表达式似乎无法正确计算。当我将脚本标签放在右正文标签之前时,“ {{value}}”会显示在不需要的页面上。但是,当我将脚本标签移动到打开正文标签之后的右侧时,页面可以正常显示“ 2”。谁能解释发生了什么事?
将脚本放在关闭正文标签之前,并且页面错误地显示“ {{value}}”
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp', []);
sampleApp.controller('AngularController', function($scope) {
$scope.a = 1;
$scope.b = 1;
$scope.value = $scope.$eval('a+b');
})
</script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/app.js"></script>
</body>
</html>
打开正文标签后将脚本放到正确位置,页面正确显示“ 2”
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/app.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp', []);
sampleApp.controller('AngularController', function($scope) {
$scope.a = 1;
$scope.b = 1;
$scope.value = $scope.$eval('a+b');
})
</script>
</body>
</html>
最佳答案
将您的脚本标签放在标题中。
建议将其放在结束标记之前,以便浏览器首先下载页面的内容,然后用户可以在下载javascript时看到一些内容。如果脚本标签在顶部,则用户将盯着白纸停留更长的时间,直到javascript完成下载,然后内容才会开始呈现。
就您而言,您似乎不希望用户在javascript运行之前看到任何内容({{value}}原始html),因此完全可以忽略该建议。