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

本文翻译自：How to create separate AngularJS controller files?

I have all of my AngularJS controllers in one file, controllers.js. 我将所有AngularJS控制器都放在一个文件controllers.js中。 This file is structured as follows: 该文件的结构如下：

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

What I'd like to do is put Ctrl1 and Ctrl2 into separate files. 我想做的是将Ctrl1和Ctrl2放入单独的文件中。 I would then include both files in my index.html, but how should that be structured? 然后我会在index.html中包含这两个文件，但是应该如何构建呢？ I tried doing some thing like this and it throws an error in the web browser console saying it can't find my controllers. 我尝试做这样的事情，它在Web浏览器控制台中抛出一个错误，说它无法找到我的控制器。 Any hints? 任何提示？

I searched StackOverflow and found this similar question - however, this syntax is using a different framework (CoffeeScript) on top of Angular, and so I haven't been able to follow. 我搜索了StackOverflow并发现了类似的问题 - 但是，这种语法在Angular之上使用了不同的框架（CoffeeScript），因此我无法遵循。

---

AngularJS: How do I create controllers in multiple files AngularJS：如何在多个文件中创建控制器

---

#1楼

参考：https://stackoom.com/question/1MHhz/如何创建单独的AngularJS控制器文件

---

#2楼

File one: 文件一：

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

File two: 文件二：

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

}]);

File three: 档案三：

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

}]);

Include in that order. 包括在那个顺序中。 I recommend 3 files so the module declaration is on its own. 我推荐3个文件，因此模块声明是独立的。

---

As for folder structure there are many many many opinions on the subject, but these two are pretty good 关于文件夹结构，关于这个主题有很多很多意见，但这两个都很不错

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

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

---

#3楼

Using the angular.module API with an array at the end will tell angular to create a new module: 在末尾使用带有数组的angular.module API将告诉angular创建一个新模块：

myApp.js myApp.js

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

Using it without the array is actually a getter function. 在没有数组的情况下使用它实际上是一个getter函数。 So to seperate your controllers, you can do: 因此，要分离您的控制器，您可以：

Ctrl1.js 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 Ctrl2.js

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

During your javascript imports, just make sure myApp.js is after AngularJS but before any controllers / services / etc...otherwise angular won't be able to initialize your controllers. 在你的javascript导入过程中，只需确保myApp.js在AngularJS之后，但在任何控制器/服务/等之前...否则angular将无法初始化你的控制器。

---

#4楼

Although both answers are technically correct, I want to introduce a different syntax choice for this answer. 虽然这两个答案在技术上都是正确的，但我想为此答案引入不同的语法选择。 This imho makes it easier to read what's going on with injection, differentiate between etc. 这个imho可以更容易地阅读注射的内容，区分等。

File One 文件一

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

File Two 文件二

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

File Three 文件三

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}

---

#5楼

Not so graceful, but the very much simple in implementation solution - using global variable. 不是那么优雅，但实现解决方案非常简单 - 使用全局变量。

In the "first" file: 在“第一个”文件中：

window.myApp = angular.module("myApp", [])
....

in the "second" , "third", etc: 在“第二”，“第三”等：

myApp.controller('MyController', function($scope) {
    .... 
    }); 

---

#6楼

What about this solution? 这个解决方案怎么样？ Modules and Controllers in Files (at the end of the page) It works with multiple controllers, directives and so on: 文件中的模块和控制器 （在页面末尾）它适用于多个控制器，指令等：

app.js app.js

var app = angular.module("myApp", ['deps']);

myCtrl.js myCtrl.js

app.controller("myCtrl", function($scope) { ..});

html HTML

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

Google has also a Best Practice Recommendations for Angular App Structure I really like to group by context. 谷歌也有角度应用程序结构的最佳实践建议我真的很想按上下文分组。 Not all the html in one folder, but for example all files for login (html, css, app.js,controller.js and so on). 并非所有html都在一个文件夹中，但是例如所有用于登录的文件（html，css，app.js，controller.js等）。 So if I work on a module, all the directives are easier to find. 因此，如果我在模块上工作，所有指令都更容易找到。