在angularjs的抽象工厂模式

Question

Mine是一个报告应用程序，用户可以在UI上的网格列上进行分组/聚合。 我有一个配置模式 - 客户端和服务器端 - 基于标志分组/聚合在客户端/服务器端完成。

我有3个服务相互交谈来做这个 - 并且他们的行为完全根据模式不同 - 据我所知这适合抽象工厂模式 - 基于a创建对象族（角度服务）条件 - 如何以角度实现这一目标？

注意：用户无法在运行时翻转此模式 - 用户登录时仅确定一次。

Answer 1

配置工厂注入

您可以创建一个保持当前活动模式的配置工厂，然后将此工厂的单件注入每个工厂，以影响您应用的行为。

请查看下面的演示或此jsfiddle。

$ injector用于动态注入工厂

另一种方法是根据所选模式动态注入服务。我会使用这种方法，因为如果你有一个复杂的应用程序，它会更容易阅读。

这里重点是$injector.get('service/factoryname')以获得所选模式的服务。您不需要使用提供程序。这同样适用于工厂进行模式选择。

请查看此jsfiddle。

angular.module('demoApp', [])
  .controller('mainController', MainController)
  .run(function(config) {
    var mode = prompt('please enter mode');
    config.setMode(mode); // just for simulation config change --> later this in your auth.success promise
  })
  .factory('config', ConfigFactory)
  .factory('fact1', Factory1)
  .factory('fact2', Factory2);

function ConfigFactory() {
  var config = {
    mode: 0,
    setMode: setMode
  };

  return config;

  function setMode(mode) {
    this.mode = mode || 0;
  }
}

function Factory1(config) {
  console.log('config in factory1', config.mode);
  var mode = parseInt(config.mode);

  var factory1 = {
    method: function() {
      console.log('default method'); // e.g. for undefined mode
    },
    otherMethod: undefined,
  };

  var modeBehaviour = {
    0: {
      method: function() {
        console.log('something special for mode 0');
      },
      otherMethod: function() {
        console.log('only at mode 0 available')
      }
    },
    1: {
      method: function() {
        console.log('something special for mode 1');
      }
    }
  }

  angular.merge(factory1, modeBehaviour[mode]);

  return factory1;
}

function Factory2(config) {
  console.log('config in factory2', config.mode);
  var factory2 = {

  };

  return factory2;
}

function MainController(config, fact1, fact2) {
  this.mode = config.mode;
  console.log(fact1, fact2);

  fact1.method();

  if (typeof fact1.otherMethod === 'function') {
    fact1.otherMethod();
  }
  /*this.changeMode = function(mode) {
  	config.setMode(mode);
  }*/
  //this.hello = 'hello from angular';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl" ng-cloak>
  current mode: {{ctrl.mode}}
</div>