web-dev-qa-db-ja.com

Angular JSを使用して他のモジュール構成に定数を注入します

アプリケーション全体でベースパスなどの変数を共有したいと思います。これらの変数は、モジュールの構成中にアクセスできる必要があります。私の意見では、そのために定数またはプロバイダーを使用できます。

複数のモジュールがあり、それぞれに独自のルーティング構成があります。これらのルーティング構成では、たとえばいくつかの設定にアクセスしたいと思います。

これはapp-module-configurationで機能しますが、他のモジュール構成では機能しません（他のモジュールのコントローラーでは機能しません）、常に「不明なプロバイダー：myApp.ordersからの情報」を取得します。

var myApp = angular.module('myApp', ['myApp.orders']);

myApp.constant('info', {
  version : '1.0'
});

myApp.config(function(info) {
  console.log('app config: ' + info.version);
});

myApp.controller('MyController', function (info) {
  console.log('controller: ' + info.version);
});

var orders = angular.module('myApp.orders', []);

// Remove comments to see it fail.

//orders.config(function(info) {
//  console.log('orders config: ' + info.version);
//});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="myApp" class="container" ng-controller="MyController">        
  </div>

少し詳しく説明していませんが、アイデアはありますか？

javascriptangularjsdependency-injectionconstantsprovider
36
martinoss

info定数はmyAppモジュールで定義されます。あなたの質問を正しく理解したら、他のモジュール（例：myApp.ordersモジュール）の定数を使用したいと思います。その場合は、myAppをmyApp.ordersに挿入する必要がありますが、逆の操作を行いたいようです。 1つの解決策は、定数をスタンドアロンモジュールに分離し、必要に応じて依存関係として挿入することです。

angular.module('constants', []) 
  .constant(...);

angular.module('myApp', ['constants', 'myApp.orders'])
  ...

angular.module('myApp.orders', ['constants'])
  ...
51
ikumen

私のソリューションが最もきれいかどうかはわかりませんが、他のコンポーネントから参照するCONFIGの定義をindex.htmlに入れました。サーバー側のコードでindex.htmlを生成し、プログラムの起動時に値を設定できるようにします。つまり、index.cshtmlを使用していますが、index.phpまたは他のテクノロジーと同じくらい簡単に使用できます。 index.htmlは次のようになります。

....

 <script type="text/javascript">
    var usingMockDataGlobal = true;
 </script>

....


<script type="text/javascript">

        (function () {
            'use strict';

            var configData = {


                codeCampType: 'angu',

                loggedInUsername: 'peter',
                mockData: usingMockDataGlobal
            };
            angular.module('baseApp').constant('CONFIG', configData);


        })();
    </script>
3
Peter Kellner