如何创build单独的AngularJS控制器文件?

我把所有的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浏览器控制台中引发错误,说它无法find我的控制器。 任何提示?

我search了StackOverflow,发现了这个类似的问题 – 但是,这个语法在Angular上面使用了一个不同的框架(CoffeeScript),所以我一直没能遵循。


AngularJS:我如何在多个文件中创build控制器

文件一:

 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

在末尾使用带有数组的angular.module API会告诉angular创build一个新的模块:

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之后,但是在任何控制器/服务/ etc之前,否则angular将不能初始化你的控制器。

虽然两个答案在技术上都是正确的,但我想为这个答案引入一个不同的语法select。 这imho使得更容易阅读注射进行,区分等。

文件一

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

这个解决scheme呢? 文件中的模块和控制器 (在页面的末尾)它适用于多个控制器,指令等等:

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"> 

谷歌也有一个angular度应用程序结构的最佳实践build议我很喜欢根据上下文进行分组。 不是一个文件夹中的所有html,但是例如所有用于login的文件(html,css,app.js,controller.js等)。 所以,如果我在一个模块上工作,所有的指令更容易find。

为简洁起见,这里是一个不依赖全局variables的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) 

不是那么优雅,而是实现解决scheme非常简单 – 使用全局variables。

在“第一个”文件中:

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

在“第二”,“第三”等:

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