I have next service:
angular.module('app').service('BaseService', function (alertService) {
var service = {};
service.message = "Hello";
service.perform = function () {
alertService.add("success",service.message);
};
return service;
});
Now I want to inherit this service in some 'ChildService' with overriding message on "World!". I expect that calling ChildService.perform() will show alert with "World!".
What is proper way to do this?
AngularJS does not provide any mechanism to implement inheritance of services directly, however for your case you can use $provide.decorator to extend BaseService itself or use it like a prototype of another ChildService using plain JavaScript. In my practice, in order to have service with configurable state and behaviour I use providers. In all of the following examples the console output will be World.
Decorator
If you don't need the original BaseService in your module, you can decorate it
function AlertService() {
this.add = function(level, message) {
switch(level) {
case 'success':
console.log(message);
}
}
}
function BaseService(alertService) {
this.message = "Hello";
this.perform = function () {
alertService.add("success",this.message);
};
}
angular.
module('app',[]).
config(['$provide', function($provide) {
$provide.decorator('BaseService', function($delegate) {
$delegate.message = 'World';
return $delegate;
});
}]).
service('alertService', AlertService).
service('BaseService', ['alertService',BaseService]).
controller('ctrl', ['BaseService', function(baseService) {
baseService.perform();
}]);
Prototypical Inheritance
function AlertService() {
this.add = function(level, message) {
switch(level) {
case 'success':
console.log(message);
}
}
}
function BaseService(alertService) {
this.message = "Hello";
this.perform = function () {
alertService.add("success",this.message);
};
}
function ChildService(BaseService) {
angular.extend(ChildService.prototype, BaseService);
this.message = "World";
}
angular.
module('app',[]).
service('alertService', AlertService).
service('BaseService', ['alertService',BaseService]).
service('ChildService', ['BaseService',ChildService]).
controller('ctrl', ['ChildService', function(ChildService) {
ChildService.perform();
}]);
Provider
function AlertService() {
this.add = function(level, message) {
switch(level) {
case 'success':
console.log(message);
}
}
}
function BaseService() {
var message = "Hello";
this.setMessage = function(msg) {
message = msg;
}
function Service(alertService) {
this.perform = function () {
alertService.add("success", message);
};
}
function Factory(alertService) {
return new Service(alertService);
}
this.$get = ['AlertService', Factory];
}
angular.
module('app',[]).
provider('BaseService', BaseService).
config(['BaseServiceProvider', function(baseServiceProvider) {
baseServiceProvider.setMessage('World');
}]).
service('AlertService', AlertService).
controller('ctrl', ['BaseService', function(baseService) {
baseService.perform();
}]);
I would modify a little bit your code:
app.factory('BaseService', function () {
//var service = {};
function service(){
this.message = "hello";
};
service.prototype.perform = function () {
console.log('perfom', this.message);
};
return new service();
});
(I just change your alertService for an console.log();.. )
then implement inheritance like this:
app.factory('childBaseService',['BaseService', function(BaseService){
var childBaseService = function(){
BaseService.constructor.call(this)
this.message = 'world!';
};
childBaseService.prototype = Object.create(BaseService.constructor.prototype);
childBaseService.prototype.constructor = childBaseService;
return new childBaseService();
}]);
You could see a example of how this works.. at the end, BaseService and childService would be instances of BaseService constructor ( service ).
console.log(BaseService instanceof BaseService.constructor); //true
console.log(childBaseService instanceof BaseService.constructor); //true
Here is an example, based on Constructor/new inheritance(which I would generally recommend against).
BaseService.$inject = ['alertService']
function BaseService(alertService) {
this.message = 'hello'
this.alertService = alertService
}
BaseService.prototype.perform = function perform() {
this.alertService.add("success",this.message);
}
ChildService.$inject = ['alertService']
function ChildService(alertService) {
this.message = 'hello world'
this.alertService = alertService
}
ChildService.prototype = Object.create(BaseService.prototype)
And then you would just include these as services:
angular.module('app')
.service('BaseService', BaseService)
.service('ChildService', ChildService)
this is bound on function calls. Constructor-based/classical inheritance in javascript adds an extra layer of confusion(e.g. note how I have to use Object.create to extend the prototyped objects, consider the work you would have to do to implement super() calls, the need to .bind() functions that would be used as callbacks, the list goes on). Object composition works smoother.
this.message rather than service.message as you didn't use a service object.Base class in your example, therefore Object.create(Base.prototype) will throw an error. I believe it should be Object.create(BaseService.prototype) instead.
Module A with service ASvc:
(function(angular) {
var app = angular.module('A', []);
app.service('ASvc', ['$http', function($http) {
var ASvc = {
list: function() {
return $http({
method: 'GET',
url: '/A'
});
},
getInstructions: function(id) {
return $http({
method: 'GET',
url: '/instructions/' + id
});
}
};
return ASvc;
}]);
})(angular);
Module B with service BSvc which inherits from ASvc:
(function(angular) {
var app = angular.module('B', ['A']);
app.service('BSvc', ['$http', 'ASvc', function($http, ASvc) {
var BSvc = {
list: function() {
return $http({
method: 'GET',
url: '/B'
});
}
};
BSvc.__proto__ = ASvc; // here you're settting the inheritance
return BSvc;
}]);
})(angular);
Now, when you call BSvc.getInstructions(30775);, you're calling the parent's service (ASvc) getInstructions function from BSvc, and when you call BSvc.list(), you're calling a method which was overridden from ASvc in BSvc. Inheritance.
And BTW, when I'm passing angular as argument to the closure, instead of referring to the global angular variable directly from within it, I'm allowing code minifiers and obfuscators to do things like this:
(function(j){var c=j.module('A',[]);})(angular); // and so on
It's a good thing to have in mind and I consider it being a good practice ;)
1. Your code uses about ~15 additional characters. 2. if you don't want to pollute the window namespace, you can simply chain those calls and save additional characters: angular.module('A',[]).service(...).service(...);