无法在单独文件中定义的 angularjs 中添加控制器答案

【问题标题】：Cannot add controller in angularjs which is defined in separate file无法在单独文件中定义的 angularjs 中添加控制器
【发布时间】：2016-12-01 21:22:56
【问题描述】：

我是角度的新手。目前，我的所有控制器都在以下 controllers.js 文件中定义，并采用以下模式

function A($scope){.....}
function B($scope){.....}
function MainCtrl($http) {.....}
.
.
.
angular
    .module('myApp')
    .controller('A', A)
    .controller('B', B)
    .controller('MainCtrl', MainCtrl)

一切正常。但现在，我想为每个控制器创建单独的 .js 文件。在根目录下创建了一个named controllers目录，并在其中添加了A.js和B.js

A.js看起来像关注

var app = angular.module('myApp', []);
app.controller('A', ['$scope', function ($scope) {
.
.
.
}]);

controllers.js 文件已添加到 index.html

<script src="js/controllers.js"></script>
<script src="controllers/A.js"></script>

现在，当我在 index.html 中添加 A.js 或 B.js 文件时，它会抛出错误，提示 MainCtrl 未定义。 但可以确定它已在controllers.js。我可以在控制台中看到以下链接。

http://errors.angularjs.org/1.5.0/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined

谁能提出一些解决方案

【问题讨论】：

你不能在那个版本的 Angular 中定义这样的控制器。 stackoverflow.com/questions/27232551/…
我正在使用 AngularJS v1.5.0

标签： jquery angularjs angularjs-scope

【解决方案1】：

您在 html 文件中使用了错误的顺序。您的 A 控制器是在您的控制器之后定义的，这意味着控制器在加载时对其一无所知。

 <script src="controllers/A.js"></script>
 <script src="js/controllers.js"></script>

但是我建议你转向使用 require.js 之类的东西来加载你的依赖项。我知道这对你来说可能看起来很奇怪，但既然你已经开始学习，走在正确的道路上会对你有很大帮助。

这里是一个很简单的介绍：

https://kielczewski.eu/2013/04/integrating-angularjs-with-requirejs/

还有一点解释：

想象一下，如果你有什么东西可以给你你所依赖的东西（比如说 controllerA）。我们称之为dependency resolver。现在你只需要告诉它我想要controllerA，它就给你了，不需要做任何额外的事情。

当然你需要告诉它在哪里可以找到你所有的文件在它的配置中，但仅此而已。

祝你好运

【讨论】：