Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
148
rated 0 times [  154] [ 6]  / answers: 1 / hits: 17293  / 10 Years ago, wed, october 29, 2014, 12:00:00

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?


More From » angularjs

 Answers
4

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



Plunker



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



Plunker



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



Plunker



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();
}]);

[#68971] Monday, October 27, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dakotahs

Total Points: 605
Total Questions: 104
Total Answers: 113

Location: Hungary
Member since Wed, Nov 9, 2022
2 Years ago
;