Normalizing service types

Suppose you had a simple application as follows:

[index.html]      <div ng-app="articleApp">     <article></article>   </div>   [app.js]      angular.module('articleApp', [])   .factory('ArticleData', function() {     var title = 'Incumbent Senator Ousted by Stalk of Broccoli';     return {       getTitle: function() {         return title;      },       author: 'Jake'    };   })   .component('article', {     controller: function(ArticleData) {       this.title = ArticleData.getTitle();       this.author = ArticleData.author;    },     template: `       <h1>{{$ctrl.title}}</h1>       <p>Written by: {{$ctrl.author}}</p>     `   });   

Angular 2 is class-based, and it includes its service types as well. The example here does not have a service type that is compatible with a class structure. So it must be converted. Thankfully, this is quite easy to do:

[index.html]      <div ng-app="articleApp">     <article></article>   </div>   [app.js]      angular.module('articleApp', [])   .service('ArticleData', function() {      var title = 'Incumbent Senator Ousted by Stalk of Broccoli';      this.getTitle = function() {      return title;    };     this.author = 'Jake';   })   .component('article', {     controller: function(ArticleData) {       this.title = ArticleData.getTitle();       this.author = ArticleData.author;    },     template: `       <h1>{{$ctrl.title}}</h1>       <p>Written by: {{$ctrl.author}}</p>     `   });   

You still want to keep the notion of title private, but you also want to maintain the API that the injected service type is providing. Services are defined by a function that acts as a constructor, and an instance created from this constructor is what is ultimately injected. Here, you are simply moving getTitle() and author to be defined on the this keyword, which thereby makes it a property on all instances. Note that the use in the component and template does not change in any way, and it shouldn't.

The simplest to implement service types, Angular 1 factories were often used first by many developers, including myself. Some developers might take offense at the following claim, but I don't think there was ever a good reason for both factories and services to exist. Both have a high degree of redundancy, and if you dig down into the Angular source code, you will see that they essentially converge to the same methods.

Why services over factories then? The new world of JavaScript, ES6, and TypeScript is being built around classes. They are a far more elegant way of expressing and organizing logic. Angular 1 services are an implementation of prototype-based classes, which when used correctly function in essentially the same way as formal ES6/TypeScript classes. If you stop here, you will have modified your services to be more extensible and comprehensible. If you intend to upgrade, you will find that Angular 1 services will cleanly upgrade to Angular 2 services.