6

Angular サービス、ディレクティブなどに挿入できるようにしたい構成があります。これを行うための最良の方法は何ですか?

私は構成モジュールを作成するというアイデアで遊んでいました:

'use strict';
angular.module('config', [])

しかし、注入される実際の構成オブジェクトとなるオブジェクト リテラルを構築する方法がわかりませんでした。

angular.module('myModule', ['ngResource', 'config'])
  .factory('myservice', function ($resource) {
        return $resource(config.myservice,{}, {
          // whatever
        })
  });

構成をサービスとして公開し、それを注入しても問題ないでしょうか?

4

2 に答える 2

9

戦略は、構成の種類によって異なりますが、いくつかのオプションがあります。

モジュール全体の定数

いくつかの定数のみが必要な場合は、次.value()のようにを使用できます。

var app;

app = angular.module("my.angular.module", []);

app.value("baseUrl", "http://myrestservice.com/api/v1");

//injecting the value
app.controller("MyCtrl", ['baseUrl', function (baseUrl) {
  console.log(baseUrl); // => "http://myrestservice.com/api/v1"
}]);

詳細な回答はこちらをご覧ください。

config/config サービスの取得

私が個人的にやりたいことは、通常どおりサービスを介して他の場所から構成を取得することです。これが遠隔地であろうと、単なる静的情報であろうと、問題ではありません。

var app;

app = angular.module("my.angular.config", []);

app.service('Configuration', [function() {
  return {
    getbaseUrl: function() { return "http://myrestservice.com/api/v1" },
    getConfig: function() {
      return {
        answer: 42,
        question: "??"
      }
    }
  }
}]):

編集: 外部フェッチの例:

var app;

app = angular.module('my.module.config', []);

app.factory('ConfigurationData', ['$http', '$q', function(http, q) {
  var deferredConfig = q.defer();

  //error handling ommited
  http.get('http://remote.local/config.json').success(function(data) {
    return deferredConfig.resolve(data);
  });

  return {
    getConfig: function() {
      return deferredConfig.promise;
    }
  };
}]);

このサービスを使用すると、構成を他のサービスに注入できますが、構成を操作する前に、サービスによって指定された promise を注入して解決する必要があるため、タイミングの問題が発生する可能性があります。

var app;

app = angular.module("my.other.module", ['my.module.config']);

app.factory('MyAwesomeService', ['ConfigurationData', function(config) {
  config.getConfig().then(function(config) {
    //do something with your config.
  });
}]);

ここでは、さまざまな入力に反応できるため、もう少し細かく制御できます。繰り返しますが、それはユースケースによって異なります。構成を構造化するための追加のロジックが必要な場合は、ここでファクトリを使用できます。

最後に、構成をさらに制御したい場合は、

カスタム プロバイダー

プロバイダーはかなり便利ですが、設計が少し難しいと思います。baseUrlアプリが動作するために必要な構成からを考慮すると、次のbaseUrlようなの値を必要とするサービスのプロバイダーを作成できます。

var app;

app = angular.module('my.angular.module', []);

app.provider("RestServiceProvider", function(){

  this.baseUrl = 'http://restservice.com';

  this.$get = function() {
    var baseUrl = this.baseUrl;
    return {
        getBaseUrl: function() { return this.baseUrl; }
    }
  };

  this.setBaseUrl = function(url) {
    this.baseUrl = url;
  };
});

これにより、アプリケーションの設定段階でクールなことを行うことができます:

app.config(['RestserviceProvider', function(restServiceProvider) {

  restServiceProvider.setBaseUrl('http://wwww.myotherrestservice.com');

}]);

サービス/コントローラー/などでフェッチするすべてのインスタンス。ofRestServiceには、baseUrl注入した瞬間から構成フェーズのセットが含まれるようになります。

より詳細な概要については、この要点をお勧めします。

于 2013-08-03T21:29:55.980 に答える
7

サービスまたはディレクティブ (またはその両方) のみを持つスタンドアロン モジュールを作成することは、アプリケーションに依存しない角度コードを作成するための優れた方法です。これを行うと、簡単にその .js ファイルを取り込んで任意のプロジェクトに配置することができ、アプリケーションに挿入するだけで機能します。

したがって、次のようなことを行います：

angular.module('config', [])
    .factory('config', function() {
        return {
            theme : 'nighttime',
            cursor : 'sword',
            ...
        };
    });

次に、次のように任意のアプリケーションに挿入できます。

angular.module('myModule', ['config'])
    .factory('myservice', function (config) {
        var theme = config.theme;
        var cursor = config.cursor;
        // do stuff with night-time swords!
    });

これは実際に angular-ui チームがすべてのディレクティブをパッケージ化する方法であり、各ディレクティブは独自のモジュールに含まれているため、他のユーザーがそのコードを取得してすべてのアプリで再利用することが容易になります。

于 2013-08-03T21:11:58.713 に答える