Question

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

如果有可能，您还会分享我将如何做到这一点的语法。类似的东西：

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

Answer 1

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

请阅读this sitepoint article，了解有关如何执行此操作的详细信息。

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

如果您需要在角度应用程序中使用外部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才有用。

Answer 3

在另一个文件中，定义一个包含逻辑的服务，然后从控制器中调用它。

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

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

3 个答案: