AngularJS - 在模块依赖注入时加载供应商脚本答案

【问题标题】：AngularJS - load a vendor script at module dependency injectionAngularJS - 在模块依赖注入时加载供应商脚本
【发布时间】：2015-02-19 21:34:29
【问题描述】：

我必须创建一个 AngularJS 模块，其中包含使用 moment.js 的指令和服务。

当模块作为依赖注入时，有没有办法加载这个库？

目标是在应用程序将模块作为依赖项注入时加载 moment.js，并避免最终应用程序与供应商脚本之间的任何配对。

（我知道存在角矩，我对其他库也有类似的问题）

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

Angular 的注入器在首次注入时运行服务的工厂函数。您可以在那里加载外部脚本。

但是，当您使用该服务时，这不会“随意”出现，因为脚本是异步加载的，因此您必须始终防止尚未加载的脚本。

例如，您可以在服务的工厂函数中执行以下操作：

.factory("foo", function($q) {

  function loadScript(src) {
    var script = document.createElement('script');
    script.src = src;
    document.getElementsByTagName('head')[0].appendChild(script);
    return script;
  }

  var loadPromise = $q(function(resolve) {
    loadScript("foo.js").onload = function(){
      resolve();
    }
  });

  return {
    load: function() {
      return loadPromise;
    },
    doFoo: function() {
      // TheFoo is the object created by foo.js
      return TheFoo.doFoo();
    }
  };
});

然后，当你使用它时，例如在控制器中，你必须等到它加载完成：

.controller("MainCtrl", function($scope, foo){

   // foo.doFoo(); <== this will fail because it has not yet loaded

   foo.load().then(function(){
     $scope.prop = foo.doFoo();
   });
});

plunker 用于说明

【讨论】：

我想要一个没有承诺的解决方案，因为它必须在应用程序中传播，但这似乎是唯一的方法
@AlexB，我认为您的问题是您希望在与底层库不同的文件中拥有一个 Angular 服务包装服务。如果您将它们放在同一个文件中，那么显然这不是问题。
是的，我真的希望它作为包装服务。我意识到应用程序的每个部分都应该并行加载，因此即使在应用程序的其余部分传播了这个 Promise，也必须使用 Promise，从而降低代码的友好性。

【解决方案2】：

假设你已经注册了你的库，你可以像这样进行条件注入：

app.service('myDependencyService', function($injector) {
  if (your_condition) {
    return $injector.get('dependency1');
  } else {
    return $injector.get('dependency2');
  }
});

【讨论】：