Question

我正在浏览.net书的角度，我使用了一个带有两个控制器的应用程序的基本示例。但是我现在得到这个错误，我不明白为什么它无法实例化模块：

http://localhost:53990/Scripts/angular.js

第4138行第9行未处理的异常

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>

有人能看出它的错误吗？

Answer 1

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

(function () {
...
});

你要么解开函数，要么调用函数，如下所示：

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

AngularJS出错 - 无法实例化模块

1 个答案: