如何创建单独的AngularJS控制器文件？

Question

我的所有AngularJS控制器都在一个文件controllers.js中。该文件的结构如下：

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

我想做的是将Ctrl1和Ctrl2放入单独的文件中。然后，我会在index.html中包含这两个文件，但该如何结构化呢？我试着做这样的事情，它在web浏览器控制台中抛出一个错误，说它找不到我的控制器。有什么提示吗？

我搜索了StackOverflow并发现了这个类似的问题--然而，这个语法在Angular的基础上使用了一个不同的框架(CoffeeScript)，所以我一直无法理解。

AngularJS：如何在多个文件中创建控制器

Answer 1

使用末尾带有数组的angular.Module API将告诉angular创建一个新模块：

MyApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

在没有数组的情况下使用它实际上是一个getter函数。因此，要分离控制器，可以执行以下操作：

Ctrl1.js

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

在javascript导入过程中，只需确保myapp.js在AngularJS之后，但在任何controllers/services/等之前。否则angular将无法初始化您的controllers。

Answer 2

文件一：

angular.module('myApp.controllers', []);

档案二：

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

档案三：

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

包括在该顺序中。我推荐3个文件，这样模块声明是独立的。

关于文件夹结构，有很多很多很多的意见，但这两个是相当好的

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html