AngularJS服務繼承

Question

我旁邊的服務：「世界」

angular.module('app').service('BaseService', function (alertService) { 
    var service = {}; 
    service.message = "Hello"; 
    service.perform = function() { 
     alertService.add("success",service.message); 
    }; 
    return service; 
}); 

現在我想在一些對重要的信息「ChildService」繼承這項服務。 我期望調用ChildService.perform（）將顯示「World！」的警報。

什麼是正確的方法來做到這一點？

Answer 1

AngularJS不提供任何機制來直接實現服務的繼承，但是，對於你的情況，你可以使用$provide.decorator延長BaseService本身或像使用普通JavaScript的另一個​​的原型一樣使用它。在我的實踐中，爲了使服務具有可配置的狀態和行爲，我使用了providers。在以下所有示例中，控制檯輸出將爲世界。

裝飾

如果你不需要你的模塊中的原BaseService，你可以裝點它

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

原型繼承

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

提供商

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

Answer 2

這裏是一個基於構造函數/新繼承（我通常會推薦）的示例。

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) 

然後你會僅僅只包含這些作爲服務：

angular.module('app') 
    .service('BaseService', BaseService) 
    .service('ChildService', ChildService) 

Answer 3

我將修改一點點代碼：

app.factory('BaseService', function() { 
    //var service = {}; 
    function service(){ 
     this.message = "hello"; 
    }; 
    service.prototype.perform = function() { 
     console.log('perfom', this.message); 
    }; 
    return new service(); 
}); 

（我只是改變你的alertService一個的console.log （）; ..）

然後實現繼承這樣的：

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

}]); 

你可以看到這是如何工作的example ..末，BaseService和childService將BaseService構造函數（服務）的實例。

console.log(BaseService instanceof BaseService.constructor); //true 
console.log(childBaseService instanceof BaseService.constructor); //true 

Answer 4

模塊A的服務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); 

模塊B與服務BSvc從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); 

現在，當你調用BSvc.getInstructions(30775);，你調用父類的服務（ASvc）getInstructions功能從BSvc，當你打電話BSvc.list()，你打電話給方法wh ich從ASvc覆蓋BSvc。遺產。

而且順便說一句，當我路過angular作爲參數傳遞給關閉，而不是指全球angular變量直接在它，我允許代碼minifiers和模糊處理，以做這樣的事情：

(function(j){var c=j.module('A',[]);})(angular); // and so on 

這是一件很好的事情，我認爲這是一個很好的做法;）