Angular.js DI具有(ES6)类和继承

时间:2015-03-12 14:45:00

标签: javascript angularjs dependency-injection ecmascript-6

背景,我们app中类/模块的当前实现是common.js和CoffeeScript类。我正在拼命寻找使用ES6或TypeScript的解决方案,但问题仍然存在。

如何使用Angular-1.x进行类继承DI?

鉴于代码:

// SuperService.js
class SuperService {
  constructor($http, $q, $etc) {
    // Implementation is not important ...  
  }   
}
export { SubService }

// SubService.js
import { SuperService } from './SuperService';
class SubService extends SuperService {
  constructor($more, $di, $things, $here) {
    // Implementation is not important ... 
    // // // // // // // // // // 
    // Problem exists here ... //
    // // // // // // // // // //
    super($we, $need, $all, $the, $super, \
          $class, $di, $things, $every, $time, $we, \
          $inherit, $from, $it)
  }
}
export { SubService }

必须在SubService这里重新定义所有父DI要求才能成功拨打super()

我们目前正在做类似以下的事情:

// CoffeeScript                              // Javascript
app.factory "subService", (Service) ->       app.factory("subService", function(Service) {
  SubService = () ->                           var SubService;
    Service.call(@)                            SubService = function() {
    @                                            Service.call(this);
                                                 return this;
  # Overwrite some stuff on the "Service"      };
  Service::basepath = "/environments"          Service.prototype.basepath = "/environments";
  Service::model = Environment                 Service.prototype.model = Environment;
                                               return new SubService();
  new SubService()                           });

除了丑陋之外,这也不太理想。

2 个答案:

答案 0 :(得分:2)

它不是ES6(它的ES7),但它可能会漂浮你的船

我会angular-decorators调查MikeRyan52

他将一个@inject装饰器组合在一起,其工作原理如下:

@inject('$http', '$rootScope')
class SomeClass {
  constructor($http, $rootScope) {

  }
}

@inject('$q')
class SubClass extends SomeClass {
  constructor($q, ...parentDependencies) { /** parent dependencies caught with a rest parameter **/
    super(...parentDependencies);
  }
}

the implementation of @inject

答案 1 :(得分:0)

在SubService.js的最底部添加它

SubService.$inject = ['$http', '$q', '$etc', '$more', '$di', '$things', '$here'];