Angularjs 在Angular中配置提供程序时使用依赖项设置函数

我想开发一个具有可配置的

url

和

paramsFn

的通用转换器组件。这里的

paramsFn

可以是普通函数，也可以是具有服务依赖关系的函数

paramsFn

应返回承诺

(function () {

  "use strict";

  angular.module("translator-app", [])
    .provider(translatorProvider);

  function translatorProvider() {

    var 
      url,
      paramsFn;

      //Provider Config Functions
      function setUrl (pUrl) {
        url = pUrl
      };

      function setParamsFn (pParamsFn) {
        paramsFn = pParamsFn;
      };


      function factory ($http, $q) {

        //Service Function Pseudo
        function translate(key) {

            if (translateions are cached) {
            //return promis of cached translations

            } else {
              /*
              make http call with configured url and 
              paramsFnto fetch translations.

              Cache translations.

              Return promise with translations.
              */
            }

         } //translate

         //Service Object
         return {
            translate: translate 
         };

      } // factory  

      factory .$inject = [
        "$http"
        "$q"
      ];


      //Exposed functionality       
      this.setUrl = setUrl;
      this.setParamsFn = setParamsFn;      
      this.$get = factory;
  }

}();

应用程序在配置后可以使用

转换器

。用户应用程序提供将能够提供带有服务依赖项的

paramFn

<稍后调用

translator.translate（…）

方法时，将调用code>paramFn

(function () {
  "use strict";

  angular.module('the-app', ["translator-app"])
    .config(translatorConfigurator)
    .controller(AppController)

  function translatorConfigurator (translatorProvider) {

    function theParamsFn (someService) {
      //use someService to generate and return params object
    }

    theParamsFn.$inject = [
      "someService"  
    ];

    translatorProvider.setUrl("/url/to/translator");
    translatorProvider.setParamsFn(theParamsFn);

  }

  function AppController (translator) {
    translator.translate("the-key").then(function (translated) {
      //do somethid with 'translated'.      
    });
  }


  translatorConfigurator.$injec = [
    "translatorProvider"
  ];

  AppController.$inject = [
    "translator"
  ];

}());

我如何才能做到这一点？

短篇故事： 根据角度

$injector

---

小说 很久以前，有一个差劲的

翻译供应商
。Angular是一位伟大的超级英雄，凭借其
$injector
武器，帮助translatorProvider变得功能丰富
TranslaterProvider
在
factory
函数中构建了它的
getParameters
函数，并在
translate
中使用它

(function () {

  "use strict";

  angular.module("translator-app", [])
    .provider(translatorProvider);

  function translatorProvider() {

    var 
      url,
      paramsFn;

    //Provider Config Functions
    function setUrl (pUrl) {
      url = pUrl
    };

    function setParamsFn (pParamsFn) {
      paramsFn = pParamsFn;
    };


    function factory ($injector, $http, $q) {

      function getParameters() {

        var 
          promise,
          fn;

        if (paramsFn) {
          fn = $injector.invoke(paramsFn);
          promise = $q.resolve(fn());

        } else {
          promise = $q.resolve()
        }

        return promise;

      }

      //Service Function Pseudo
      function translate(key) {

        if (translateions are cached) {
        //return promis of cached translations

        } else {

          getParameters()
            .then(function (params) {
                return $http({
                  url: url,
                  params: params
                });
            })
            .then(function (response) {

              var extracted = ...; //extract field from response.data

              //put extracted into cache

              return $q.resolve(extractedField)

            });
        }

       } //translate

       //Service Object
       return {
          translate: translate 
       };

    } // factory  

    factory .$inject = [
      "$injector",
      "$http"
      "$q"
    ];


    //Exposed functionality       
    this.setUrl = setUrl;
    this.setParamsFn = setParamsFn;      
    this.$get = factory;
  }

}();

现在可以按如下方式配置
translator

(function () {
  "use strict";

  angular.module('the-app', ["translator-app"])
    .config(translatorConfigurator)
    .controller(AppController)

  function translatorConfigurator (translatorProvider) {

    function theParamsFn (someService) {

      return function () {
        //returns some parameters object
      }

    }

    theParamsFn.$inject = [
      "someService"  
    ];

    translatorProvider.setUrl("/url/to/translator");
    translatorProvider.setParamsFn(theParamsFn);

  }

  function AppController (translator) {
    translator.translate("the-key").then(function (translated) {
      //do somethid with 'translated'.      
    });
  }


  translatorConfigurator.$inject = [
    "translatorProvider"
  ];

  AppController.$inject = [
    "translator"
  ];

}());

在这些变化之后，
translatorprovider
变得更加强大，并帮助许多其他模块，从此他们幸福地生活在一起

(function () {
  "use strict";

  angular.module('the-app', ["translator-app"])
    .config(translatorConfigurator)
    .controller(AppController)

  function translatorConfigurator (translatorProvider) {

    function theParamsFn (someService) {

      return function () {
        //returns some parameters object
      }

    }

    theParamsFn.$inject = [
      "someService"  
    ];

    translatorProvider.setUrl("/url/to/translator");
    translatorProvider.setParamsFn(theParamsFn);

  }

  function AppController (translator) {
    translator.translate("the-key").then(function (translated) {
      //do somethid with 'translated'.      
    });
  }


  translatorConfigurator.$inject = [
    "translatorProvider"
  ];

  AppController.$inject = [
    "translator"
  ];

}());