即使控制器可用，Angular JS 也会抛出错误答案

【问题标题】：Angular JS thowing error even though controller is available即使控制器可用，Angular JS 也会抛出错误
【发布时间】：2015-01-01 09:35:53
【问题描述】：

我是 Angular JS 的新手，我正在尝试一些示例...但是当我尝试加载我的应用程序时遇到一个非常奇怪的异常...

这是我的 Angular JS 代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="JS/Controllers.js"></script>
    <body ng-app="myapp">
            <div ng-controller="HelloController">
                <h2>Hello {{helloTo.title}} !</h2>
            </div>
            <div ng-controller="MyController" >
                <span ng-show="myData.showIt"></span>
                <span ng-hide="myData.showIt"></span>
            </div>
        </body>

这是我的控制器代码：

angular.module("myapp", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp1", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

萤火虫记录的错误：错误：[ng:areq]http://errors.angularjs.org/1.2.5/ng/areq?p0=MyController&p1=not%20a%20function%2C%20got%20undefined https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js 83号线

我正在使用 Angular js 版本 1.2.5...

【问题讨论】：

这里有两个完全不同的模块。一个叫myapp，一个叫myapp2。这就是找不到MyController 的原因。

标签： javascript angularjs single-page-application

【解决方案1】：

这里有两个问题。

第一，您定义了 2 个不同的模块：“myapp”和“myapp1”。也许这只是一个错字，而您的意思是让它们相同。

那么，第二个问题是，当你第二次使用[] 时，你正在重新定义你的模块：

angular.module("myapp", [])

这是一个模块setter。

改为使用不带[] 的模块getter：

angular.module("myapp").controller("MyController", ...)

【讨论】：

【解决方案2】：

以下将起作用。你必须记住的是，每次你定义一个新的angular.module，如果你输入angular.module('myapp', [])，你就是在定义一个不知道任何其他模块的新空间。如果您随后执行angular.module('myapp').controller()，会将控制器连接到原始模块。因此在其范围内。

在定义控制器时注意[]的省略。 [] 用于依赖注入，但在angular.module 方面定义了一个全新的模块空间。

下面是一种正确模块化 Angular js 的方法。

angular.module("myapp.hello", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp.my", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

angular.module("myapp", [
    'myapp.hello',
    'myapp.my']);

【讨论】：

【解决方案3】：

你有两个模块，myapp 和 myapp2。 myapp2 有一个控制器 MyController ，您试图在 myapp 模块的范围内使用它，这是不可能的。

您可以在 myapp 模块中定义 MyController。 http://jsfiddle.net/g35tpy5q/1/

var myapp=angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

myapp.controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

或将 myapp2 模块注入 myapp 模块 http://jsfiddle.net/g35tpy5q/2/

angular.module("myapp2", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});
angular.module("myapp", ["myapp2"]).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

【讨论】：

【解决方案4】：

您正在创建两个不同的角度模块，每个模块有一个控制器，而不是一个模块有两个不同的控制器，这就是你想这样做，只需更改你的代码以匹配此语法：

angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        // ...
    })
    .controller("MyController", function($scope) {
        // ...
    });

或者这个：

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

myApp.controller("HelloController", function($scope) {
    // ...
});

myApp.controller("MyController", function($scope) {
    // ...
});

【讨论】：