听说我应该将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),因此完全可以忽略该建议。

10-05 20:48
查看更多