Angular.js DI with (ES6) classes and inheritance

Question

Background, current implementation of classes/modules in our app is common.js and CoffeeScript classes. I'm desperately looking for a solution to work with ES6 or TypeScript, but the problem remains.

How to do DI with class inheritance using Angular-1.x?

Given the code:

// 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 }

Must one, in the SubService here redefine all the parent DI requirements in order to successfully call super()?

We're presently doing something akin to the following:

// 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()                           });

Which is also less than ideal, aside from being ugly.

Did you ever find a solution to this? We're also approaching it in a similar fashion but there has to be a better way. — forrestranger
– forrestranger, Commented Jul 11, 2015 at 15:07
Exactly for this reason, my team hasn't made the switch to ES6 for our angular things yet, we're hoping that this will somehow be addressed in the typescript move in ng-2.0, but we're not seeing anything that solves this yet. — Lee Hambley
– Lee Hambley, Commented Jul 12, 2015 at 9:06
As in most other places too, in AngularJS I think its easier and more readable to use composition over inheritance. — Thomas
– Thomas, Commented Mar 15, 2017 at 15:40

user1364910 · Accepted Answer · 2015-07-16 21:35:31Z

2

it's not ES6 (it's ES7), but it just might float your boat

I would look into angular-decorators by MikeRyan52.

He's put together an @inject decorator that works as follows:

@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

answered Jul 16, 2015 at 21:35

user1364910

Sign up to request clarification or add additional context in comments.

1 Comment

Lee Hambley Over a year ago

great, thanks for that tip, I think when you start backporting angular2 features back to angular one, it might be better to invest the time to upgrade :) but still, awesome to see a proof of concept, and have a choice.

lukasz-karolewski · Accepted Answer · 2017-03-16 06:11:33Z

0

add this at the very bottom of SubService.js

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

answered Mar 16, 2017 at 6:11

lukasz-karolewski

3791 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular.js DI with (ES6) classes and inheritance

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related