我正在做一个 AngularJS 教程，它由一个 HTML 文件和一个简单的 JS 脚本组成，以提供简单的 Angular 功能。以下是 HTML 文件。
<!DOCTYPE>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src='main.js'></script>
<head>
<title> Angular Practice </title>
</head>
<body ng-app='learningAngular' ng-controller='myCntr'>
<input type="text" ng-model='name'> <br>
<div ng-bind='name' ng-click='alertMe()'></div>
<button ng-click='alertMe()'>Alert Me Angular</button> <br>
<div ng-show='willShow'> Show this!! </div>
<button ng-click='toggleShow()'> Show </button>
<div ng-hide='willShow'> using ng-hide! </div>
<ul ng-repeat='puppy in doggos'>
<li> {{ puppy }} </li>
</ul>
<ul ng-repeat='(student, grade) in grades'>
<li> {{ student }}, {{ grade }} </li>
</ul>
</body>
</html>
脚本 main.js 位于同一文件夹中，如下所示:
var app = angular.module('learningAngular', []);
app.controller('myCntr', ['$scope', function($scope) {
$scope.name = 'Josephine';
$scope.alertMe = function() {
alert("Congrats!");
};
$scope.willShow = true;
$scope.toggleShow = function() {
$scope.willShow = !$scope.willShow;
};
$scope.doggos = ['rex', 'fido', 'rover'];
$scope.grades = {
Max: 'A',
Joan: 'B',
Jay: 'C'
};
}]);
我很困惑，因为当我将 Angular 模块/ Controller 放在同一文件夹中的脚本文件(main.js)中时，Angular 不再工作。当我将脚本移动到index.html 时，它工作得很好。我尝试摆弄 src='main.js' 看看这是否是问题所在，但没有发现任何问题。
最佳答案
您的<script>标签应该在您的 <head> 内或<body>标签。这可能就是它不接受它的原因。
这样的事情应该有效:
<!DOCTYPE>
<html>
<head>
<title> Angular Practice </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-app='learningAngular' ng-controller='myCntr'>
...
</body>
</html>
旧的约定是将脚本放在 <body> 的末尾。标签，但由于我们正在使用负责渲染 View 的 Javascript 框架，因此该约定不再有意义。
关于javascript - AngularJS 脚本在直接文件之外时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46288964/