AngularJS出错-无法实例化模块

Error with AngularJS - failed to instantiate module

本文关键字：实例化模块出错 AngularJS 更新时间：2023-09-26

我正在为.net book浏览angular，并使用一个带有两个控制器的应用程序的基本示例。然而，我现在收到了这个错误，我不明白为什么它无法实例化模块：

中第4138行第9列出现未处理的异常http://localhost:53990/Scripts/angular.js

0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这是我的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>AngularJS with .NET</title>
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <h1>Game setup</h1>
    <div ng-controller="ExampleController1">
        <h2>Player 1</h2>
        <label>Name:</label>
        <input type="text" placeholder="Please enter player 1 name" ng-model="name" ng-focus="onNameFocused()" />
        <h3 ng-show="name">Player 1 name is {{name}}</h3>
        <h3 ng-show="previousName">Previous Player 1 name was {{previousName}}</h3>
    </div>
    <div ng-controller="ExampleController2">
        <h2>Player 2</h2>
        <label>Name:</label>
        <input type="text" placeholder="Please enter player 2 name" ng-model="name" ng-focus="onNameFocused()" />
        <h3 ng-show="name">Player 2 name is {{name}}</h3>
        <h3 ng-show="previousName">Previous Player 2 name was {{previousName}}</h3>
    </div>
    <script>
        (function () {
            "use strict"
            var myAppModule = angular.module('myApp', []);
            //myAppModule.filter('customname', function () {
            //    return function (name) {
            //        name = name || '';
            //        var customName = "";
            //        for (var i = 0; i < name.length; i++) {
            //            if (name.charAt(i) == "e") {
            //                customName += "3";
            //            }
            //            else if (name.charAt(i) == "o") {
            //                customName += "0"
            //            }
            //            else {
            //                customName += name.charAt(i);
            //            }
            //        }
            //        return customName;
            //    }
            //})
            myAppModule.controller('ExampleController1', ['$scope', function
                ($scope) { // Explicit dependency injection
                $scope.name = "Alex Pop";
                $scope.previousName = "";
                $scope.onNameFocused = function () {
                    $scope.previousName = $scope.name;
                };
            }]);
            myAppModule.controller('ExampleController2', ['$scope', function ($scope) {
                $scope.name = "Alex Pop";
                $scope.previousName = "";
                $scope.onNameFocused = function () {
                    $scope.previousName = $scope.name;
                };
            }]);
            console.log(myAppModule.name);
        });
    </script>
</body>
</html>

有人看到它怎么了吗？

您将整个Angular Script封装在IIFE中，但从未调用函数来加载脚本。

(function () {
...
});

您要么应该打开该函数，要么调用该函数，如下所示：

(function () {
...
}());