多个文件中的工厂方法Angular JS

时间:2014-09-16 12:16:47

标签: angularjs angularjs-factory

当你的工厂有4个相关的方法时,最好的做法是什么,每个方法都很长(200多行代码),你想避免拥有800多行代码的大文件?

一种解决方案是在同一模块下创建4个工厂,每个工厂暴露一个方法并在其自己的文件中。然后将它们全部注入需要它们的控制器中。

有更好的解决方案吗?我想创建一次Factory,然后添加方法就像我使用模块模式进行模块扩充一样。然后我只需要注入一次工厂并使其所有方法都可用。

3 个答案:

答案 0 :(得分:3)

  

我想创建一次Factory,然后添加方法就像我正在使用模块模式进行模块扩充一样。然后我只需要注入一次工厂并使其所有方法都可用。

是的,那会有效:

// In your main module file.
angular.module('myModule', []);


// file1.js
angular.module('myModule').factory('BigService1', function(){
    // Your actual implementation here.
    console.log('I am BigService1');
});


// file2.js
angular.module('myModule').factory('BigService2', function(){
    // Your actual implementation here.
    console.log('I am BigService2');
});


// ... additional files


// Separate file/service to aggregate your big factory services.
angular.module('myModule').service('AggregateService', [
        // Add dependencies
        'BigService1','BigService2',
function(BigService1, BigService2){
    // Return an object that exposes the factory interfaces.
    return {
        service1: BigService1,
        service2: BigService2
    };
}]);

答案 1 :(得分:1)

您还可以使用旧的vanilla js样式安排代码,然后在服务中访问这些库,如下所示:

var Mirko = { };

Mirko.FunService = {
  getAllSomething : function (p1, p2) {
  },
  ...
};

angular.module('myModule').factory('BigService', function(){
  return {
    methodOne : Mirko.getAllSomething,
    ...
  };
});

您最终会得到一个可以在角度应用程序范围之外访问的对象Mirko,但它绝不会与您想要在应用程序中使用的其他外部API(不是为角度编写)有所不同。您处理自己的“外部”api的方式可以通过oldschool时尚方式完成,每个“类”一个文件,例如'FunService'。

它可能不是最漂亮的解决方案,但它将是一个简单的抽象。

只是说......

答案 2 :(得分:0)

也许可以通过其他工厂对您的方法进行细分,这些工厂可以注入您的" main"工厂:

// file 1
angular.module('foo').factory('segment1', function () {
  return {
    method: function () {
      // ... super long method
    }
  };
});

// file 2
angular.module('foo').factory('segment2', function () {
  return {
    method: function () {
      // ... super long method
    }
  };
});

// your main factory file
angular.module('foo').factory('myFactory', function (segment1, segment2) {
  return {
    method1: segment1.method,
    method2: segment2.method
  };
}
相关问题