angularjs – 如何扩展Angular工厂

2023年5月29日 202次阅读

我有一个数据服务文件,我想分解成更小的模块/件.目前,代码如下所示：

angular
    .module('myapp')
    .factory('DataService', DataService)

DataService.$inject = ['$http'];

function DataService($http) {
    var service = {
        methodOne: methodOne,
        methodTwo: methodTwo,
        methodThree: methodThree
    };
    return service;
}

我想做的事情：将这一个文件分成三个其他文件,并将每个方法放在自己的文件中.例如,有一个公共DataService文件和另外3个包含3种方法的实际实现的文件.我正在尝试创建如下的不同工厂,但我不确定这是否正确.在打电话时我无法让它工作

angular
    .module('myapp')
    .factory('DataService', DataService)

DataService.$inject = ['$http'];

function DataService($http) {
    var service = {}; //creating empty object
    return service;
}


//File 1
angular
    .module('myapp')
    .factory('dataServiceOne', function(DataService){
        var extended = angular.extend(DataService, {})
        extended.methodOne = function() {
            console.log('working method one')
        }
        return extended;
    });

//File 2
angular
    .module('myapp')
    .factory('dataServiceTwo', function(DataService){
        var extended = angular.extend(DataService, {})
        extended.methodOne = function() {
            console.log('working method two')
        }
        return extended;
    });

//File 3
angular
    .module('myapp')
    .factory('dataServiceThree', function(DataService){
        var extended = angular.extend(DataService, {})
        extended.methodOne = function() {
            console.log('working method three')
        }
        return extended;
    });

然后在应用程序的其他地方调用它.给我一个错误,说methodOne不是一个函数.

...
DataService.methodOne() //this is implementation
...

最佳答案 代码问题是dataServiceOne,dataServiceTwo和dataServiceThree工厂没有被初始化,如果你不注入它们DataService不会扩展,我已经创建了一个小提琴,它创建了一个包装器服务来做到这一点,

因此,您可以注入WrapperService而不是注入DataService,它将反过来扩展DataService(不确定是否解决了您的目的)

JSFiddle

 //File 4
 angular
   .module('myapp')
   .factory('WrapperService', function(dataServiceOne, dataServiceTwo,    dataServiceThree, DataService) {
       return DataService
   });

 angular
  .module('myapp')
    .controller("MYController", ["$scope", "WrapperService",    function($scope, DataService) {
      DataService.methodOne();
      DataService.methodTwo();
      DataService.methodThree();
   }]);

希望这可以帮助！！

点赞