angularjsのファクトリパターン

Question

Mineは、ユーザーがUIのグリッド列でグループ化/集計を実行できるレポートアプリケーションです。 私は構成モードを持っています - クライアント側とサーバー側 - フラグのグループ化/集約に基づいてクライアント側/サーバー側で行われます。

私は、これを行うために互いに話す3つのサービスを持っています - それらの動作はモードに基づいて完全に異なります - これは抽象的な工場パターンに合っています - 条件 - どのように私は角度でこれを達成することができますか？

注：ユーザーが実行時にこのモードを反転することはできません - それは一度だけ決定されたときにユーザーがログイン

Answer 1

コンフィグ工場注入

現在保持しているコンフィギュレーションファクトリを作成することができます。このファクトリのシングルトンを各ファクトリに挿入して、アプリケーションの動作に影響を与えます。

以下のデモまたは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>