如何创建独立的AngularJS控制器中的文件？如何创建独立的AngularJS控制器中的文件？(H

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

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

我希望做的就是把CTRL 1和CTRL 2到单独的文件。 然后我会包括我的index.html这两个文件，但是应该如何是结构？ 我试图做一些这样的事情，它在Web浏览器控制台抛出一个错误说，它不能找到我的控制器。 任何提示？

我搜索的StackOverflow，发现这个类似的问题 - 然而，这种语法使用上的角顶不同的框架（CoffeeScript的），所以我一直没能跟随。

---

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

Answer 1:

文件之一：

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

Answer 2:

使用angular.module API，并在最后一个阵列将告诉角来创建一个新的模块：

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之后，但在任何控制器/服务/等等，否则将角不能初始化控制器。

Answer 3:

虽然这两个答案都是技术上是正确的，我想介绍一个不同的语法选择了这个答案。 恕我直言，这使得它更易于阅读发生了什么事情与注入等区分

文件中的一个

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

文件中的两个

// 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
}

文件中的三个

// 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
}

Answer 4:

这个怎么样的解决方案？ 模块和控制器中的文件 （在页面的结尾）它与多个控制器，指令等：

app.js

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

myCtrl.js

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

HTML

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

谷歌也有一个对角应用程序结构的最佳实践建议我真的情境喜欢组。 并不是所有的HTML一个文件夹中，但例如用于登录的所有文件（HTML，CSS，app.js，controller.js等）。 所以，如果我在模块上的工作，所有的指令都更容易找到。

Answer 5:

为简单起见，这里是一个不依赖于全局变量的ES2015样本

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)

Answer 6:

不是那么的优雅，但在实现解决方案的十分简单 - 使用全局变量。

在“第一”的文件：

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

在“第二”，“第三”等：

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

文章来源: How to create separate AngularJS controller files?