Аннотация шаблон фабрики в angularjs

Question

Mine - это приложение для отчетов, в котором пользователи могут группировать/группировать столбцы сетки в пользовательском интерфейсе. У меня есть режим конфигурации - сторона клиента и сервер - на основе группировки/агрегации флагов выполняется со стороны клиента/сервера.

У меня есть 3 службы, которые общаются друг с другом, чтобы сделать это - и их поведение полностью отличается от режима - по моим знаниям это подходит для абстрактного шаблона фабрики - создание семейства объектов (служб в угловом) на основе условие - как я могу достичь этого в угловом?

Примечание: пользователь не может перевернуть этот режим на время выполнения - это определяется только один раз, когда пользователь входит в систему

Answer 1

инъекции завод Config

Вы можете создать конфигурации завод, который держит в настоящее время. активным режимом, а затем вставлять синглтон этой фабрики в каждую фабрику, чтобы повлиять на поведение вашего приложения.

Пожалуйста, посмотрите демо внизу или этом jsfiddle.

$ форсунка для динамического инъекционного автокрепеж

Другой способ заключается в динамически вводить услугу в зависимости от выбранного режима. Я бы использовал этот метод, потому что его легче читать, если у вас сложное приложение.

Важным моментом здесь является $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) { 
 
    \t 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>