Javascript 将脚本src标记放在正文的顶部，而将脚本src标记放在正文的底部_Javascript_Angularjs

Javascript 将脚本src标记放在正文的顶部，而将脚本src标记放在正文的底部

javascript angularjs

Javascript 将脚本src标记放在正文的顶部，而将脚本src标记放在正文的底部,javascript,angularjs,Javascript,Angularjs,我听说我应该把脚本标签放在结束正文标签的前面。然而，当我这样做时，由于某些原因，我的angularJS表达式似乎计算不正确。当我将脚本标记放在结束正文标记的正前方时，{{value}}显示在我不想要的页面上。但是，当我将脚本标记移动到开始正文标记之后的右侧时，页面将正常工作以显示“2”。有人能解释发生了什么事吗将脚本放在关闭正文标记之前，页面错误地显示“{value}}” 活动登记 Guru99全球活动 {{value}} var sampleApp=angular.module（'samp

我听说我应该把脚本标签放在结束正文标签的前面。然而，当我这样做时，由于某些原因，我的angularJS表达式似乎计算不正确。当我将脚本标记放在结束正文标记的正前方时，{{value}}显示在我不想要的页面上。但是，当我将脚本标记移动到开始正文标记之后的右侧时，页面将正常工作以显示“2”。有人能解释发生了什么事吗

将脚本放在关闭正文标记之前，页面错误地显示“{value}}”


活动登记
Guru99全球活动
{{value}}
var sampleApp=angular.module（'sampleApp'，[]）；
sampleApp.controller（'AngularController'，函数（$scope）{
$scope.a=1；
$scope.b=1；
$scope.value=$scope.$eval（'a+b'）；
})

将脚本放在打开正文标签之后，页面正确显示“2”


活动登记
Guru99全球活动
{{value}}
var sampleApp=angular.module（'sampleApp'，[]）；
sampleApp.controller（'AngularController'，函数（$scope）{
$scope.a=1；
$scope.b=1；
$scope.value=$scope.$eval（'a+b'）；
})

浏览器从上到下“读取”html，当遇到javascript或css时，它将停止渲染，直到完全处理它。这就是为什么在许多情况下建议将脚本放在底部的原因。通常在整个页面呈现之前，脚本无法执行其“任务”，那么为什么要阻止初始呈现呢

这就是说，这只是你所看到的行为的一个无关紧要的原因。对于您的问题，一般的答案是javascript也是自上而下“读取”的，因此在使用之前未声明的任何变量都是未定义的（有一个称为“提升”的概念也会影响这一点，但目前并不相关）。具体地说，在您的例子中，

angular

对象尚未声明（如果您打开控制台工具，您可能会认为这是一个错误），因此您无法调用与该对象关联的任何方法

angular

在angular.js中声明，在第一个示例中，它包含在脚本之后，在第二个示例中（正确地）包含在脚本之前

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

将脚本标记放在标题中

建议将其放在结束标记之前，以便浏览器首先下载页面内容，然后用户可以在下载javascript时看到一些内容。如果script标记位于顶部，那么用户将盯着白色页面看更长的时间，直到javascript完成下载，然后内容将开始呈现

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

非常简单。所有角度函数、处理程序、组件和指令都在

angulatjs

脚本中初始化。加载底部的

angularjs

时。加载

HTML

后，浏览器将加载脚本。因此，在开始时没有

角度

，因此它不会捕获

{{{value}}

，因此它只是浏览器的纯文本，浏览器将直接显示

{{value}}

当您在顶部加载时。角度传感器将被加载。所以angular知道如何处理

{{value}}

。因此它将绑定

{{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>

<!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>