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

Question

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

10

这可能是个愚蠢的问题。我知道AngularJS控制器使用Javascript代码将应用逻辑保持在视图外。但我想知道是否可以将外部的Javascript文件链接到控制器，以便使其不那么冗长。

如果可能的话，您能分享一下如何做到这一点的语法吗？类似于：

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

- Jared Whipple

3个回答

5

不仅可以将控制器代码分成不同的文件，而且你可能应该这样做。Angular控制器负责视图背后的业务逻辑，仅限于此。如果在控制器内部进行以下操作，则操作有误（列表不详细）：

从其中访问您的后端
操作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(...)
});

顺便说一下，只有在您需要与Angular内置服务提供的 $log 不同的东西时，这个 loggerService 才会很有用

- Michael P. Bazos

2

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

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

- vvondra

1

我明白你的意思，但是我不太确定应该把外部文件放在哪里。我只需要在主视图 "index.html" 中链接它，然后使用 ServiceFromDifferentFile 调用它吗？还是需要将外部文件链接到服务或工厂？ - Jared Whipple

这一直是问题所在。如何避免在index.html中出现那个链接！！？ - Soldeplata Saketos

你可以使用像grunt、gulp等工具将所有文件连接成一个大文件。 - vvondra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scorpion-Prince · Accepted Answer

如果您的问题是控制器逻辑过长，那么您是正确的，这是一种代码异味。您希望将控制器尽可能变得轻巧，只需要足够的逻辑来处理视图事件并更新模型（作用域）。如果您想重构控制器代码，则第一步是将逻辑提取到服务中（在Angular术语中为提供程序/工厂/服务）。然后可以将服务注入到您的控制器中，类似于您注入 $scope 服务的方式。

阅读此SitePoint文章以了解如何执行此操作的详细信息。

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

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