AngularJS错误：$injector:nomod模块不可用_Angularjs

AngularJS错误：$injector:nomod模块不可用

angularjs

AngularJS错误：$injector:nomod模块不可用,angularjs,Angularjs,我正在努力学习AngularJS，并正在创建我的第一页。我遇到了一个错误：错误：$injector:nomod模块不可用（）我有三个文件： /index.html /js/app.js /js/controllers/MainController.js 具体如下： /index.html /js/controllers/MainController.js 我哪里出错了？避免创建全局变量，如用于分配角度模块的app。相反，angular提供了更好的语法来跨多个文件设置和获取模块 App.js

我正在努力学习AngularJS，并正在创建我的第一页。我遇到了一个错误：

错误：$injector:nomod模块不可用（）

我有三个文件：

/index.html
/js/app.js
/js/controllers/MainController.js

具体如下：

/index.html /js/controllers/MainController.js

我哪里出错了？

避免创建全局变量，如用于分配角度模块的app。相反，angular提供了更好的语法来跨多个文件设置和获取模块

App.js 主控制器

避免创建全局变量，如用于分配角度模块的app。相反，angular提供了更好的语法来跨多个文件设置和获取模块

App.js 主控制器这是一个打字错误。当您在html中拖动

app.js

时，您编写的是

scr

，而不是

src

。见：

这是一个打字错误。当您在html中拖动

app.js

时，您编写的是

scr

，而不是

src

。见：

我已将文件更改为此，但仍然收到相同的错误谢谢您的帮助，我将从现在开始使用此。我已将文件更改为此，但仍然收到相同的错误谢谢您的帮助，我将从现在开始使用此

<!doctype html>
<html>
    <head>
        <tilte>AngularJS Controllers</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp">
            <h1>Controllers</h1>
            <div ng-controller="MainController">
                <p>{{ message }}</p>
                <form ng-submit="updateMessage(newMessage)">
                    <input type="text" ng-model="newMessage">
                    <button type="submit">Update Message</button>
                </form>
            </div>
        </div>

        <!-- Modules -->
        <script type="text/javascript" scr="js/app.js"></script>

        <!-- Controllers -->
        <script type="text/javascript" src="js/controllers/MainController.js"></script>
    </body>
</html>

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function($scope){
    $scope.message = 'hello';

    $scope.updateMessage = function(message){
        $scope.message = message;
    };
}]);

(function() {
    // IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
     angular.module("myApp", []);
})();

  (function() {
     angular.module("myApp") // note [] is missing, it means we're getting a module
        .controller('MainController', ['$scope', function($scope){
            $scope.message = 'hello';

            $scope.updateMessage = function(message){
               $scope.message = message;
             };
        }]);
    })();

<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>