我是angularjs
的新手,我无法找到任何文档或示例。我要做的是扩展基本服务,以便我可以使用其他服务的基本服务定义的方法。例如,假设我有一项基本服务如下。
angular.module('myServices', []).
factory('BasicService', function($http){
var some_arg = 'abcd'
var BasicService = {
method_one: function(arg=some_arg){ /*code for method one*/},
method_two: function(arg=some_arg){ /*code for method two*/},
method_three: function(arg=some_arg){ /*code for method three*/},
});
return BasicService;
}
);
现在我想定义一个从上面BasicService
扩展的扩展服务,以便我可以使用扩展服务中BasicService下定义的方法。也许是这样的:
factory('ExtendedService', function($http){
var ExtendedService = BasicService();
ExtendedService['method_four'] = function(){/* code for method four */}
return ExtendedService;
}
答案 0 :(得分:68)
更清洁和势在必行的方式
.factory('ExtendedService', function($http, BasicService){
var extended = angular.extend(BasicService, {})
extended.method = function() {
// ...
}
return extended;
}
答案 1 :(得分:21)
您的ExtendedService
应该注入BasicService
以便能够访问它。除了BasicService
是一个对象文字,所以你实际上不能将它称为函数(BasicService()
)。
.factory('ExtendedService', function($http, BasicService){
BasicService['method_four'] = function(){};
return BasicService;
}
答案 2 :(得分:18)
在我看来,更好的方法:
.factory('ExtendedService', function($http, BasicService){
var service = angular.copy(BasicService);
service.methodFour = function(){
//code for method four
};
return service;
});
这里至少不会改变继承的服务。
答案 3 :(得分:3)
很抱歉,如果我在这里发帖,但可能是一个好地方。 我引用了这个post
注意扩展服务/工厂因为是单身人士 所以你可以延长服务/工厂一次。
'use strict';
angular.module('animal', [])
.factory('Animal',function(){
return {
vocalization:'',
vocalize : function () {
console.log('vocalize: ' + this.vocalization);
}
}
});
angular.module('dog', ['animal'])
.factory('Dog', function (Animal) {
Animal.vocalization = 'bark bark!';
Animal.color = 'red';
return Animal;
});
angular.module('cat', ['animal'])
.factory('Cat', function (Animal) {
Animal.vocalization = 'meowwww';
Animal.color = 'white';
return Animal;
});
angular.module('app', ['dog','cat'])
.controller('MainCtrl',function($scope,Cat,Dog){
$scope.cat = Cat;
$scope.dog = Dog;
console.log($scope.cat);
console.log($scope.dog);
//$scope.cat = Cat;
});
但如果你喜欢
'use strict';
angular.module('animal', [])
.factory('Animal',function(){
return function(vocalization){
return {
vocalization:vocalization,
vocalize : function () {
console.log('vocalize: ' + this.vocalization);
}
}
}
});
angular.module('app', ['animal'])
.factory('Dog', function (Animal) {
function ngDog(){
this.prop = 'my prop 1';
this.myMethod = function(){
console.log('test 1');
}
}
return angular.extend(Animal('bark bark!'), new ngDog());
})
.factory('Cat', function (Animal) {
function ngCat(){
this.prop = 'my prop 2';
this.myMethod = function(){
console.log('test 2');
}
}
return angular.extend(Animal('meooow'), new ngCat());
})
.controller('MainCtrl',function($scope,Cat,Dog){
$scope.cat = Cat;
$scope.dog = Dog;
console.log($scope.cat);
console.log($scope.dog);
//$scope.cat = Cat;
});
它有效
答案 4 :(得分:1)
我编写了一个$ extend扩展提供程序,它使用Backbone的扩展 - 所以你可以获得原型和静态属性,以备你需要时使用它们 - 另外你得到父/子构造函数 - 请参阅gist @ {{3} }
答案 5 :(得分:-1)
要扩展Stewie的答案,您还可以执行以下操作:
.factory('ExtendedService', function($http, BasicService){
var service = {
method_one: BasicService.method_one,
method_two: BasicService.method_two,
method_three: BasicService.method_three,
method_four: method_four
});
return service ;
function method_four(){
}
}
这样做的好处是原始服务不会被改变,同时保持其功能。您还可以选择在ExtendedService中为BasicService中的其他3个方法使用您自己的实现。