在AngularJS控制器之一中延遲加載外部JavaScript

Question

我的一些路線需要外部JS的功能。 我不想一次性加載它們，因為這些JS僅在某些路線中需要（例如/upload需要一些JS用於照片上傳， /photos需要另一個JS用於燈箱， /funny需要JS用於動畫的東西等）。

懶惰加載那些外部JavaScripts的最佳做法是什么？

這些路線可以多次訪問（例如，用戶可以轉到/upload然后/photos然后再次/upload ）

Answer 1

除了Alex所說的，如果您將延遲加載AngularJS偽像（如控制器和指令），您將不得不使用相關的提供程序來注冊它們而不是模塊API。 在應用程序引導后使用模塊API注冊的人工制品將無法供應用程序使用。 例如，你可以像這樣定義一個懶惰的控制器......

$controllerProvider.register('SomeLazyController', function($scope)
{
   $scope.key = '...'; 
});

而不是這個......

angular.module('app').controller('SomeLazyController', function($scope)
{
    $scope.key = '...';
});

我寫了一篇博文，詳細介紹了這個以及如何使用Alex所說的'resolve'方法來實現AngularJS中的延遲加載。 http://ify.io/lazy-loading-in-angularjs/

Answer 2

我知道處理這種情況的唯一方法是使用路由的“解析”方法。 此方法可用於定義在實例化路由控制器之前要加載的依賴項。 這種方法的一種不同的可能返回類型是承諾。 因此，您可以使用它來開始異步加載外部JavaScript代碼，並返回一個加載外部腳本后立即解析的promise。

有關這方面的文檔可以在這里找到： https ： //docs.angularjs.org/api/ngRoute/provider/$routeProvider在“when”部分。

Answer 3

@ alex3683的答案可能是正確的AngularJS方式，但我沒有掌握這個概念，所以我使用了jQuery的getScript() 。 所以，在CoffeeScript中：

yourModule.factory 'foo', ->
    $.getScript 'https://script-to-load', ->
        # whatever you want to do once the script is loaded

然后從控制器中調用它。 由於AngularJS服務是惰性和單例，因此只會加載腳本一次。