如何扩展 Angular 工厂

Question

我有一个数据服务文件，我想将其拆分成更小的 modules/pieces。目前，代码如下所示：

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
...

Answer 1

您可以将动态方法添加到任何对象，只需将函数分配给对象的属性。我在这里使用了控制器，所以很容易看到，但概念是一样的。

<html>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" />
</head>

<body ng-app="app">
    <div ng-controller="myController as ctrl">
        <div>{{ctrl.hello}}</div>
        <div>{{ctrl.method1()}}</div>
        <div>{{ctrl.method2()}}</div>
        <div>{{ctrl.method3()}}</div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js "></script>
    <script src="dynamicmethods.js"></script>
        <script>
        angular.module('app', []).controller("myController",myController);

        function  myController($scope){
            var ctrl = this;
            ctrl.hello ="Hello"
            decorate() ;

            function decorate() {
                ctrl.method1 = method1
                ctrl.method2 = method2
                ctrl.method3 = method3
            }    

        };
    </script>
</body>
</html>

dynamicmethods.js

function method1() {
    return "I'm one"
}

function method2() {
    return "I'm two"
};

function method3() {
    return "I'm three"
}

Answer 2

代码的问题是 dataServiceOne、dataServiceTwo 和 dataServiceThree 工厂如果你不注入它们就不会被初始化 DataService 不会扩展，我创建了一个 fiddle 它创建了一个包装器服务，

因此，您可以注入 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();
   }]);

Answer 3

这是您要找的吗？ AngularJS

中的继承

// Inject your factories in your controller(s)
var module = angular.module();
module.controller('yourController', ['$scope', 'DataServiceOne', 'DataServiceTwo', 'DataServiceThree', 
function($scope, DataServiceOne, DataServiceTwo, DataServiceThree) {
    // use these factories
}
]);


module.factory('DataService', function ($q, $http) {
   return {
      //public API
   };
});

module.factory('DataServiceOne', function (DataService, $sce) {
   var child = Object.create(DataService);
   child.methodOne = function () {
     //extending the parent
     console.log('working method one');
   };
   return child;
});

module.factory('DataServiceTwo', function (DataService, $sce) {
   var child = Object.create(DataService);
   child.methodOne = function () {
      //extending the parent
      console.log('working method two');
   };
   return child;
});

module.factory('DataServiceThree', function (DataService, $sce) {
   var child = Object.create(DataService);
   child.methodOne = function () {
      //extending the parent
      console.log('working method three');
   };
   return child;
});

如何扩展 Angular 工厂

How to extend an Angular factory

angularjs

angularjs-directive

angularjs-scope

angular-services

angular-ui-router