如何将控制器放在Angular 1.2的另一个文件中？

Question

我试图将控制器文件与模块文件分开（在app.js中）。但是在浏览器中执行此操作会给我一个错误。它只有在我将控制器和模块代码放在一个文件中时才有效。但如果我将控制器放在另一个文件中，它就无法工作。

这是我的模块代码（app.js）：

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

对于控制器（CoursePlannerAppCtrl.js文件）：

CoursePlannerApp.controller("coursePlannerCtrl", function ($scope) {

});

有人可以解释一下，为什么它不起作用？感谢。

Answer 1

在你的app文件中

angular.module('app',[]); // initialise application

在您的控制器文件中

angular.module('app').controller('myCtrl', [function(){}]); //create controller

并确保将这两个文件都加载到浏览器中 - 应用程序而不是控制器

Answer 2

如果您不使用某种捆绑器（如webpack），则将所有文件放在全局范围内，因此，您应该管理加载文件的顺序。

根据您的情况，您应该在app.js之前加载CoursePlannerAppCtrl.js。这样，app.js会将CoursePlannerApp放在窗口上，您可以通过CoursePlannerAppCtrl.js访问它。

<script src="angular.js"></script>
<script src="app.js"></script>
<script src="CoursePlannerAppCtrl.js"></script>

Answer 3

您需要按正确的顺序包含脚本标记。就像下面一样

<script src="../lib/angular.js"></script>
<script src="CoursePlannerApp.js"></script>
<script src="coursePlannerCtrl.js"></script>