Question

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

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

这是你在找什么？ 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;
});

Answer 2

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

task nativeLibsToJar(type: Jar, description: 'create a jar archive of the native libs') {
    destinationDir file("$buildDir/native-libs")
    baseName 'native-libs'
    from fileTree(dir: 'libs', include: '**/*.so')
    into 'lib/'
}

dynamicmethods.js

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

Answer 3

代码问题是dataServiceTwo，dataServiceThree和//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(); }]);工厂未初始化如果你不注入它们DataService不会扩展，我创建了一个创建包装器服务的小提琴这样做，

因此，您可以注入WrapperService而不是注入DataService，它将反过来扩展DataService（不确定是否能解决您的目的）

JSFiddle

{{1}}

希望这会有所帮助!!

如何扩展Angular工厂

3 个答案: