Angular Dependency Injection Annotations With ES6 Classes

angular.module('app').service('Service', function($http) {
  this.get = function() { ... };
});

And that example with explicit annotations would look like so:

angular.module('app').service('Service', ['$http', function($http) {
  this.get = function() { ... };
}]);

How does this play along with ES6 classes?

The above example as a class looks like this:

angular.module('app').service('Service', Service);
class Service {
constructor($http) {
this.$http = $http;
}
get() { ... }
}

And in order to add proper annotations to it, simply add this line at the bottom:

Service.$inject = ['$http'];

That’s all there’s to it, if you insist on adding these manually.

But please, stop doing it like an animal, and incorporate something like a babel-plugin-angularjs-annotate. Given that you’re using ES6, you very likely already transpiling your code into ES5, and this plugin can simply go over your code at that point and add these as necessary, given little hints. I’ve written more about it here.

Keep it classy! </dadpun>