Replacing Services with TypeScript Classes
Early AngularJS applications predate the widespread use of module loaders. The strategy of this era was to concatenate source files and rely on AngularJS's dependency injection as a poor-man's module loader. Often services were used to house libraries instead of stateful services.
During conversion, we will introduce Webpack as a module loader. For services that lack state and don't heavily rely on other dependency injected services, we recommend rewriting them using TypeScript modules. The advantages of writing code this way are:
- It becomes framework agnostic (doesn't rely on AngularJS explicitly)
- It is easier to test
- It instantly works with both AngularJS and Angular
Even services that depend on a limited set of AngularJS services (e.g.
$http) can be rewritten by depending on other libraries (e.g. window.fetch).- Convert services using
.factoryto.service- Angular's
@Injectableexpects an object it can usenewwith,similar to how.serviceworks (e.g.new CalculatorService())
- Replace constructor functions with classes using the
classkeyword. - Use the class directly by
exporting it.
angular.module("calcapp", []).factory("CalculatorService", function () {
return {
square: function (a) {
return a * a;
},
cube: function (a) {
return a * a * a;
},
};
});
angular.module("calcapp", []).service("CalculatorService", function () {
this.square = function (a) {
return a * a;
};
this.cube = function (a) {
return a * a * a;
};
});
Also add type information to all methods to make the services safer and easier to use.
class CalculatorService {
square(a: number) {
return a * a;
}
cube(a: number) {
return a * a * a;
}
}
angular.module("calcapp", []).service("CalculatorService", CalculatorService);
export class CalculatorService { ... }
// elsewhere
import {CalculatorService} from './calculator.service';
Last modified 1yr ago