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

时间:2016-12-01 21:22:57

标签: jquery angularjs angularjs-scope

我是棱角分明的新手。目前,我的所有控制器都在以下模式的 controllers.js 文件中定义

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

事情进展顺利。但现在,我想为每个控制器创建单独的 .js 文件。在根目录下创建了目录命名控制器并添加了 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

任何人都可以建议一些解决方案

1 个答案:

答案 0 :(得分: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/

还有一点解释:

想象一下,如果你有什么东西可以给你任何你依赖的东西(比如说控制器A)。我们称之为dependency resolver。现在你只需要告诉它我想要控制器A而且它不需要做任何额外的事情就可以了。

当然你需要告诉它在哪里找到你的所有文件的配置,但那就是全部。

祝你好运