Question

我知道这个问题肯定会被问到很多。但老实说，我不确定我做错了什么，我找到的解决方案似乎没有用。

供参考，我正在学习本教程： https://www.youtube.com/watch?v=OPxeCiy0RdY

反正。我正在创建一个简单的角度应用程序，让你输入两个值，它返回结果我还在HTML代码的底部包含一个小测试器来检查，看看我的javascript文件中是否有问题。我已经检查了脚本标签中的引用，并确保它们是正确的，所有文件也在同一目录中。我已经构建了控制器，模块，并在HTML代码中引用它们。但由于某种原因，当我加载我的索引页面时，它根本无法识别Angular代码部分。我的代码如下：

HTML：

<!DOCTYPE HTML>
<html ng-app="app1">

<head>
  <title>Angular Practice Page</title>
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

<!-- Adds a controller that the Angular module will control.
    The view is the div element and all that it contains. The $scope
    component is used to provide data to the view. -->
<body>
  <div ng-controller="ctrl1">
    <span>Calculate:</span>
    <input type="text" ng-model="first" />
    <input type="text" ng-model="second" />

    <button ng-click="updateValue()">Sum</button>
    <br /><br />

    {{calculation}}

    <!-- Test Calculation -->
    <p>
      5 + 5 = {{5+5}}
    </p>

  </div>
</body>
</html>

Angular Code：

var app1 = angular.module('app1', []);

app1.controller('ctrl1', function($scope){
  $scope.first = 1;
  $scope.second = 1;

  $scope.updateValue = function() {
    $scope.calculation = $scope.first + ' + ' + $scope.second +
    ' = ' + ($scope.first + $scope.second);
  };
});

图像：

我已经尝试将“ng-app”移动到HTML文件中代码的不同部分，只是在没有运气的情况下四处寻找。

教师老师在这里也有一套完整的代码：http://www.newthinktank.com/2016/02/angularjs-tutorial/，即使我逐字复制它也不行。我的电脑上有什么问题吗？作为参考，我使用Atom文本编辑器和谷歌浏览器作为我的浏览器。我用其他浏览器测试过，得到了相同的结果。

任何解释都将不胜感激。提前谢谢！

Answer 1

只需将此脚本放在头顶。 Angular JS CDN应该始终位于任何java脚本文件之前。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

而不是这个顺序，

<head>
  <title>Angular Practice Page</title>
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

将脚本文件的顺序更改为此。它肯定会奏效。

<head>
   <title>Angular Practice Page</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
   <script src="script.js"></script>
</head>

Answer 2

在顶部包含Angular。由于您的脚本引用了在angular执行时未加载的script.js。
使用输入类型number代替文字。因为，text字段为您提供了字符串值，这导致字符串连接而不是算术运算。

var app1 = angular.module('app1', []);

app1.controller('ctrl1', function($scope){
  $scope.first = 1;
  $scope.second = 1;

  $scope.updateValue = function() {
    $scope.calculation = $scope.first + ' + ' + $scope.second +
    ' = ' + ($scope.first + $scope.second);
  };
});

<!DOCTYPE HTML>
<html ng-app="app1">

<head>
  <title>Angular Practice Page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<!-- Adds a controller that the Angular module will control.
    The view is the div element and all that it contains. The $scope
    component is used to provide data to the view. -->
<body>
  <div ng-controller="ctrl1">
    <span>Calculate:</span>
    <input type="number" ng-model="first" />
    <input type="number" ng-model="second" />

    <button ng-click="updateValue()">Sum</button>
    <br /><br />

    {{calculation}}

    <!-- Test Calculation -->
    <p>
      5 + 5 = {{5+5}}
    </p>

  </div>
</body>
</html>

Angular JS不在HTML页面中显示

2 个答案: