AngularJS项目：如何为不同控制器创建独立文件夹？

嘿，这个错误我太熟了！拆分模块到独立文件夹时，大多是踩了几个常见的小坑，咱们一步步捋清楚：

1. 先检查脚本加载顺序！ #

Angular的核心库必须第一个加载，然后是你的主模块文件（app.js），最后才是各个控制器的文件。顺序错了的话，控制器找不到要注册的主模块，直接就炸了。举个正确的例子：

<!-- 第一步：加载Angular核心 -->
<script src="angular.min.js"></script>
<!-- 第二步：加载你的主模块定义 -->
<script src="app.js"></script>
<!-- 第三步：加载各个控制器文件 -->
<script src="controllers/DashboardController.js"></script>
<script src="controllers/ProfileController.js"></script>

2. 别把控制器注册到错的模块上 #

你的主模块是scotchApp对吧？那每个控制器都得注册到已存在的这个模块上，不能重新创建模块。比如：
// app.js里的主模块定义（正确写法）

// 这里创建scotchApp模块，第二个空数组是依赖项
var scotchApp = angular.module('scotchApp', []);

// 控制器文件（比如controllers/DashboardController.js）的正确写法

// 注意！这里不要加第二个参数，加了就会重新创建模块，覆盖原来的
scotchApp.controller('DashboardController', function($scope) {
  // 你的控制器逻辑
});

要是控制器里写成angular.module('scotchApp', [])，等于重新建了个空模块，原来的配置全丢了，肯定报错。

3. 路径别写错！ #

拆分到文件夹后，最容易犯的就是路径错误。打开浏览器F12的Network标签，看看控制器文件是不是404了。比如你的控制器在controllers文件夹下，HTML里得这么引：

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

如果是项目根目录下的app/controllers，那就要写成src="app/controllers/DashboardController.js"，别偷懒。

4. 模块依赖没漏加吧？ #

如果你的控制器用到了别的模块（比如ngRoute、自定义服务），主模块必须声明这些依赖。比如用路由的话，app.js得这么写：

var scotchApp = angular.module('scotchApp', ['ngRoute']);

同时别忘了加载对应的依赖库，比如angular-route.min.js，不然也会报错。

5. 压缩安全的写法要注意 #

如果你的代码以后要压缩，千万别用普通的匿名函数写控制器，不然压缩后参数名被改掉，Angular就找不到对应的服务了。推荐两种写法：
// 数组式注入

scotchApp.controller('ProfileController', ['$scope', '$http', function($scope, $http) {
  // 逻辑代码
}]);

// 或者用$inject属性

var ProfileController = function($scope, $http) {
  // 逻辑代码
};
ProfileController.$inject = ['$scope', '$http'];
scotchApp.controller('ProfileController', ProfileController);

按这几步排查下来，基本就能解决这个模块注入错误了。

内容的提问来源于stack exchange，提问作者TheUnKnown