Code, Angular, iOS and more by Aviv Ben-Yosef

Angular Dependency Injection Annotations With ES6 Classes

| Comments

After covering how ES6 classes can be used for defining services in Angular in the previous post, I was asked how do these play along with Angular’s dependency injection annotations.

To recap, dependency injection annotations are used so that Angular would know what it should be injecting even when code is obfuscated/minified. This is a regular service with injection in ES5:

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

“Maintaining AngularJS feels like Cobol 🤷…”

You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?

It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.

Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.

Get the modernization email course!