我可以将外部 javascript 文件链接到 AngularJS 控制器吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28775810/
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
Can I link an external javascript file to an AngularJS controller?
提问by Jared Whipple
This may be a dumb question. I know AngularJS controllers use javascript code to keep the application logic outside of the view. But I was wondering if I could link an external javascript file to a controller so it didn't have to be so long.
这可能是一个愚蠢的问题。我知道 AngularJS 控制器使用 javascript 代码将应用程序逻辑保持在视图之外。但我想知道是否可以将外部 javascript 文件链接到控制器，这样它就不必那么长了。
If it is possible would you also share the syntax of how I would do this. Something like:
如果可能的话，您是否也可以分享我将如何执行此操作的语法。就像是：
app.controller('demoCtrl', ['$scope', function ($scope) {
$scope.msgtxt='Hello World';
src=somejavascriptfile.js;
}]);
采纳答案by Scorpion-Prince
If your issue is that the controller logic is too long, you are correct that it is a code smell. You want to make the controller as thin as possible, just enough logic to handle the view events and updating the model (scope). If you want to refactor your controller code, the first step is to extract out the logic into service(s) (in angular lingo providers / factories / services). The services can then be injected into your controller, similar to how you have injected the $scopeservice.
如果您的问题是控制器逻辑太长，那么您认为这是代码异味是正确的。你想让控制器尽可能的薄，只有足够的逻辑来处理视图事件和更新模型（范围）。如果你想重构你的控制器代码，第一步是将逻辑提取到服务中（在角度术语提供者/工厂/服务中）。然后可以将服务注入到您的控制器中，类似于您注入$scope服务的方式。
Read this sitepoint articlefor details on how to do this.
阅读此站点文章以了解有关如何执行此操作的详细信息。
The next step might be look for logic (mainly UI related) which can extracted into directives.
下一步可能是寻找可以提取到指令中的逻辑（主要是 UI 相关的）。
In case you need to use an external javascript library within your angular application, the optimal way is to add that script to the scripts section of your html file, and wrap the functionality in a service or a directive (if it is UI related). Make sure to check if there are angular modules available out there for the 3rd party library you want to pull in.
如果您需要在 angular 应用程序中使用外部 javascript 库，最佳方法是将该脚本添加到 html 文件的脚本部分，并将功能包装在服务或指令中（如果它与 UI 相关）。确保检查您要引入的第 3 方库是否有可用的 angular 模块。
回答by Michael P. Bazos
Not only you can split your controller code among different files, but you probably shoulddo that. An angular controller is responsible for the business logic behind a view, and only for that. You are doing it wrong if, inside the controller, you are (list not exhaustive) :
您不仅可以将控制器代码拆分到不同的文件中，而且您可能应该这样做。角度控制器负责视图背后的业务逻辑，并且仅用于此。如果在控制器内部您是（列表不详尽），那么您就做错了：
- accessing your backend from it
- manipulating the DOM
- writing utility code for showing alerts in your application (for example)
- 从中访问您的后端
- 操作 DOM
- 编写用于在应用程序中显示警报的实用程序代码（例如）
Your components should be conciseand of a single responsibility.
您的组件应该简洁且具有单一职责。
Here follows an example of how you would export some part of your code in a service. You do not link a js file from a controller, but you load it in your page, and inject the service as an argument of your controller :
1) Load your service in index.html :
下面是一个示例，说明如何在服务中导出部分代码。您不会从控制器链接 js 文件，而是将其加载到您的页面中，并将服务作为控制器的参数注入：
1）在index.html 中加载您的服务：
<script src="js/factories/loggerService.js"></script>
2) Implement your service in loggerService.js
2) 在loggerService.js 中实现你的服务
app.factories('loggerService', function () {
//
// Implement here some logging methods
//
// IMPORTANT: do not bloat this service with methods not related
// with logging
//
});
3) Inject your service in your controller :
3）在您的控制器中注入您的服务：
app.controller('demoCtrl', function ($scope, loggerService) {
loggerService.info(...)
});
By the way, this loggerServicewould be useful only if you need something different than the service provided by angular built-in service $log
顺便说一句，loggerService只有当您需要与 angular 内置服务提供的服务不同的东西时，这才有用$log
回答by vvondra
In a different file, define a service containing the logic and just call it from the controller.
在另一个文件中，定义一个包含逻辑的服务，然后从控制器调用它。
app.controller('demoCtrl', ['$scope', function (ServiceFromDifferentFile, $scope) {
$scope.msgtxt='Hello World';
ServiceFromDifferentFile.doStuff()
}]);
