Question

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

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

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

（我知道角度矩存在，我和其他lib有类似的问题）

Answer 1

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

但是，当你使用该服务时，它不会自由地＃34;因为脚本是异步加载的，所以你必须始终防止尚未加载的脚本。< / p>

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

.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用于说明

Answer 2

假设您已注册库，您可以进行条件注入，例如：

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

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

2 个答案: