我可以將外部javascript文件鏈接到AngularJS控制器嗎？

Question

這可能是一個愚蠢的問題。 我知道AngularJS控制器使用javascript代碼將應用程序邏輯保持在視圖之外。 但我想知道我是否可以將外部javascript文件鏈接到控制器，所以它不必太長。

如果有可能你也會分享我將如何做的語法。 就像是：

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

Answer 1

如果您的問題是控制器邏輯太長，那么您是正確的，這是代碼味道。 您希望使控制器盡可能地薄，只需足夠的邏輯來處理視圖事件和更新模型（范圍）。 如果要重構控制器代碼，第一步是將邏輯提取到服務中（在角度語言提供者/工廠/服務中）。 然后可以將服務注入到控制器中，類似於注入$scope服務的方式。

閱讀此sitepoint文章 ，了解有關如何執行此操作的詳細信息。

下一步可能是尋找可以提取到指令中的邏輯（主要是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(...)
});

順便說一句，只有當您需要與angular內置服務$log提供的服務不同的東西時，此loggerService才有用

Answer 3

在另一個文件中，定義包含邏輯的服務，並從控制器中調用它。

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