Question

我听说我应该将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>

Answer 1

将脚本标签放在标题中。

建议将其放在结束标记之前，以便浏览器首先下载页面的内容，然后用户可以在下载javascript时看到一些内容。如果脚本标签在顶部，则用户将盯着白纸停留更长的时间，直到javascript完成下载，然后内容才会开始呈现。

以您为例，您似乎不希望用户在javascript运行之前看到任何内容（{{value}}原始html），因此完全可以忽略该建议。

Answer 2

非常简单。所有的角度函数，处理程序，组件和指令均在angulatjs脚本中初始化。当您在底部加载angularjs时。加载HTML后，浏览器将加载脚本。因此，一开始没有angular，因此它不会捕获{{value}}，因此它只是浏览器的纯文本，浏览器将直接显示{{value}}。

在顶部加载时。角钢将被加载。因此，Angular知道如何处理{{value}}。因此它将绑定{{value}}的值。

Answer 3

浏览器从上至下“读取”您的html，当遇到javascript或css时，它将停止呈现，直到完全处理它为止。这就是为什么在许多情况下建议将脚本放在底部的原因。通常，该脚本直到整个页面都呈现后才能执行其“工作”，所以为什么要阻止初始呈现？

话虽如此，这仅是切线地引起您所看到的行为的原因。对于您的问题的一般答案是，JavaScript也是从上至下“读取”的，因此在使用之前未声明的任何变量都是未定义的（有一个称为“提升”的概念也会对其造成影响，但没有影响目前的相关性）。具体来说，您尚未声明angular对象（如果您打开控制台工具会发现这是一个错误），因此您无法调用与该对象关联的任何方法。 angular是在angular.js中声明的，在第一个示例中，脚本包含在之后，在第二个示例中（正确）包含在之前。

如果在第一个示例中将您的脚本简单移动到所包含脚本的底部，您将看到您的应用程序应按预期运行

将脚本src标签放在主体顶部vs将脚本src标签放在主体底部

3 个答案: