angularjs - 在 AngularJS 控制器之一中延迟加载外部 JavaScript

Question

我的一些路线需要来自外部 JS 的功能。我不想一次全部加载它们，因为这些 JS 仅在某些路线中需要（例如/upload，需要一些 JS 来上传照片，/photos需要另一个 JS 来制作灯箱，/funny需要 JS 来制作动画等）。

延迟加载那些外部 JavaScript 的最佳实践是什么？

这些路线可以多次访问（例如，用户可以再次/upload访问）/photos/upload

score 3 · Accepted Answer

除了 Alex 所说的之外，如果您要延迟加载 AngularJS 人工制品（例如控制器和指令），您将不得不使用相关的提供者来注册它们，而不是使用模块 API。应用程序启动后使用模块 API 注册的人工制品将不可用于应用程序。例如，您将定义一个像这样的惰性控制器......

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

而不是这个...

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

我写了一篇博文，详细介绍了这一点以及如何使用 Alex 所说的“解决”方法在 AngularJS 中实现延迟加载。http://ify.io/lazy-loading-in-angularjs/

score 2 · Accepted Answer

我知道处理这种情况的唯一方法是使用路由的“解决”方法。此方法可用于定义要在路由控制器实例化之前加载的依赖项。此方法的不同可能返回类型之一是承诺。因此，您可以使用它来开始异步加载您的外部 JavaScript 代码并返回一个承诺，该承诺在您的外部脚本加载后立即解决。

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

score 2 · Accepted Answer

@alex3683 的答案可能是正确的 AngularJS 方式，但我没有掌握这个概念，所以我使用了 jQuery 的getScript(). 所以，在 CoffeeScript 中：

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

只需从您的控制器调用它。由于 AngularJS 服务是惰性的和单例的，这只会加载脚本一次。

3 回答 3