我可以将外部javascript文件链接到AngularJS控制器吗？

Question

这可能是一个愚蠢的问题.我知道AngularJS控制器使用javascript代码将应用程序逻辑保持在视图之外.但我想知道我是否可以将外部javascript文件链接到控制器,所以它不必太长.

如果有可能你也会分享我将如何做的语法.就像是:

app.controller('demoCtrl', ['$scope', function ($scope) {
    $scope.msgtxt='Hello World';
    src=somejavascriptfile.js;
}]);

Answer 1

如果您的问题是控制器逻辑太长，那么您正确地认为它是代码异味。您希望使控制器尽可能的薄，只有足够的逻辑来处理视图事件和更新模型（范围）。如果要重构控制器代码，第一步是将逻辑提取到服务中（在角度语言提供商/工厂/服务中）。然后可以将服务注入到您的控制器中，类似于您注入$scope服务的方式。

阅读此站点点文章，以获取有关如何执行此操作的详细信息。

下一步可能是寻找可以提取到指令中的逻辑（主要是与UI相关）。

如果需要在angular应用程序中使用外部javascript库，最佳方法是将该脚本添加到html文件的scripts部分，并将功能包装在服务或指令中（如果与UI相关）。确保检查要插入的第三方库是否有可用的角度模块。

Answer 2

您不仅可以将控制器代码分配到不同的文件中，而且您可能应该这样做。角度控制器仅负责视图背后的业务逻辑。如果您在控制器内部（列表未详尽），则您做错了：

• 从中访问您的后端
• 操作DOM
• 编写用于在应用程序中显示警报的实用程序代码（例如）

您的组件应简洁明了，并负有单一责任。

以下是一个如何在服务中导出部分代码的示例。您没有从控制器链接js文件，而是将其加载到页面中，并将服务作为控制器的参数注入：


1）将服务加载到index.html中：

<script src="js/factories/loggerService.js"></script>

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）在您的控制器中注入服务：

app.controller('demoCtrl', function ($scope, loggerService) {
    loggerService.info(...)
});

顺便说一句，这loggerService仅在您需要与角度内置服务所提供的服务有所不同时才有用$log