Question

我正在做一个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'
        };
    }]);

我很困惑，因为当我在同一文件夹中的脚本文件（main.js）中有Angular模块/控制器时，Angular不再起作用。当我将脚本移动到index.html时，它完全正常。我试过搞乱src =＆＃39; main.js＆＃39;看看这是不是问题，并且找不到任何问题。

Answer 1

您的<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>标记的末尾，但由于我们正在使用负责呈现视图的Javascript框架，因此该约定不会感觉不再。

AngularJS脚本在立即文件

1 个答案: