Javascript 如何在多个文件中定义控制器 - AngularJs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28231367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to define controllers in multiple files - AngularJs
提问by naCheex
I am trying to define controllers in separate files, but I'm getting the error:
我试图在单独的文件中定义控制器，但出现错误：
transactionsController not a function got undefined
File structure
文件结构
I have added files in this sequence 1- common.js 2- transactions.js
我在这个序列中添加了文件 1-common.js 2-transactions.js
Common.jsIn common files I have defined
Common.js在我定义的公共文件中
var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);
Transactions.js
交易.js
angular.module('spModule').controller('transactionsController',
['$scope', '$http', function ($scope, $http) {} ]
);
HTML FIle
HTML文件
<body ng-app="spModule" ng-controller="transactionsController">
回答by fdomig
First, you should get rid of the global appvariable. This is not necessary. Second, you have to understand the principle of the angular.module()method.
首先，您应该摆脱全局app变量。这是没有必要的。其次，你必须了解angular.module()方法的原理。
Using angular.module()with two parameters (e.g. angular.module('my-module', [])) would result in settinga new module with its corresponding dependencies. In contrast, when using angular.module('my-module')the corresponding module is looked up internally and returned to the caller (getting).
使用angular.module()两个参数（例如angular.module('my-module', [])）将导致设置一个具有相应依赖项的新模块。相比之下，当使用angular.module('my-module')相应的模块时，会在内部查找并返回给调用者（getting）。
The means when you first define you application you might just create the following files and structure.
这意味着当您第一次定义应用程序时，您可能只创建以下文件和结构。
app.js
应用程序.js
angular.module('myApp', []);
FirstController.js
第一控制器.js
angular.module('myApp').controller('FirstController', function () {});
SecondController.js
第二控制器.js
angular.module('myApp').controller('SecondController', function () {});
If you now include these files in your html document in this particularly order (at least app.jshas to come first), your application works just fine with two separate controllers in two separate files.
如果您现在按特定顺序将这些文件包含在 html 文档中（至少app.js必须先出现），那么您的应用程序可以在两个单独的文件中使用两个单独的控制器正常工作。
Further readings
进一步阅读
I can recommend the AngularJS Styleguide on modulesfor getting more ideas on this topic.
我可以推荐AngularJS Styleguide on modules以获得关于这个主题的更多想法。
回答by dprobhat
You can do this stuff by creating modules. Create module and respective controllers. And inject that module to the main app module.
你可以通过创建模块来做这些事情。创建模块和相应的控制器。并将该模块注入主应用程序模块。
Transactions.js
(function() {
'use strict';
angular.module('tmodule', []);
})();
(function() {
'use strict';
angular.module('tmodule').controller('transactionsController', ['$scope', '$http',
function ($scope, $http){
}]);
})();
Now inject the "tmodule" to your Common.js file-
现在将“tmodule”注入到你的 Common.js 文件中——
var app = angular.module("spModule", ["ngMessages", "ui.bootstrap","tmodule"]);
回答by Viral Pala
You Can put this controller in seprate file like mycontroller1.js
您可以将此控制器放在单独的文件中，例如 mycontroller1.js
app.controller('myController', ['$scope',function($scope)
{
$scope.myValue='hello World'
}])
Same like this you can create new js file 'myNewcontroller.js' and can put new controller :
同样，您可以创建新的 js 文件 'myNewcontroller.js' 并可以放置新的控制器：
app.controller('myController2', ['$scope',function($scope)
{
$scope.myValue='hello World'
}])
Hope this will help you :) Cheers !!
希望这会帮助你 :) 干杯！
回答by Patrick Motard
Load your common.js first. Move ng-app directive to <html>tag. Change transaction.js to:
首先加载您的 common.js。将 ng-app 指令移动到<html>标签。将 transaction.js 更改为：
app.controller('transactionsController', TransactionsController)
TransactionsController.$inject = ['$scope','$http']
function TransactionsController($scope, $http) {
};
Just for fun. Let me know what happens.
只是为了好玩。让我知道发生什么事。
