在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。

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服务是惰性和单例，因此只会加载脚本一次。