7

私は Angular に非常に慣れていないので、合理的な設計上の質問と思われるものを尋ねるのに十分な知識があることを願っています。

Angular を介していくつかのデータをグラフ化し、$resource を使用しています。Angular をプロジェクトに導入する前に、ビューに貼り付けたばかりのサンプル json データからチャート オブジェクトを作成するためのチャート ファクトリ関数を作成しました。

Angular を使用するようになったので、グラフ機能を「Chart」リソースの Active Record スタイルに配置して、描画、保存、更新などを行うことができるようにしたいと思います。

このパターンの利点はシンプルであることですが、欠点は永続性と動作の結合です。たとえば、グラフの設定をローカル ストレージに保存したい場合、かなり面倒です。

キャリアの中で AR に何度も悩まされてきたので、チャート オブジェクトをそのままにして、コントローラーがリソースからチャートにデータを渡すようにすることで、DM を使用したいと考えています。

でも！angularjs の依存性注入についての漠然とした理解は、共通の永続化インターフェイスを受け入れることができるリソースまたはそのようなものを作成できる可能性があることを示唆しています-正しい言葉は「スコープ」ですか?

AR 戦略の例:

App.factory('Chart', [
  '$resource', function($resource) {
    var chart = $resource('/api/charts/:id', {
      id: '@id'
    });

    chart.draw = function() { ... }

    return chart
  }
]);

App.controller('ChartsCtrl', [
  '$scope', 'Chart', function($scope, Chart) {
    $scope.charts = Chart.query(function() {
      $.each($scope.charts, function(i, c) { c.draw() })
    })
  }
])

DM 戦略の例:

App.chart = function(resource) {
  return { draw: function() { ... } }
}

App.factory('ChartResource', [
  '$resource', function($resource) {
    return $resource('/api/charts/:id', {
      id: '@id'
    })
  }
])

App.controller('ChartsCtrl', [
  '$scope', 'ChartResource', function($scope, ChartResource) {
    $scope.charts = $.map(ChartResource.query(), function(i, resource) {
      chart = App.chart(resource)
      chart.draw()
      return chart
    }
  }
])

しかし、私は DI を活用する方法をよく理解していないため、私にはわからない 3 つ目の方法があると思います。

言い換えれば、交換可能な永続化戦略を使用してオブジェクトを作成する AngularJS の方法は何ですか?

4

1 に答える 1

3

DataMapper 戦略は、実際にはすでに Dependency Injection の一種です。必要な永続化の実装を Chart コンストラクターに渡していますが、別のものを個別に渡すことができnewます。非 DI の方法は、ActiveRecord スタイルの例のように、永続化の実装をハードコーディングすることです。

DataMapper は、Angular.JS 固有の意味での DI ではありません。Angular の DI では、実行時に実装を交換することはできません。ただし、公式のngMockモジュールを使用してこれを実現できます。ngMock はテストに使用されることになっているため、そのシナリオ以外では、これはおそらく素晴らしいアイデアではありません。

この種の Angular.JS 固有の規則はないようです。実際、Angular.JS には多くの規則がまったくありません。

コンストラクターで実装を渡すのではなく、いつでも永続化メカニズムを変更するための別のメソッドを提供することもできます。たとえば、ChartResource最初のネットワーク ベースの取得に使用し、次に IndexedDB にスワップしてローカルに保存するには、次のようにします。

// ChartResourceIndexedDB: same API as $resource but uses local IndexedDB
app.factory('ChartResourceIndexedDB', /* .. */);

app.controller('ChartsCtrl', [
  '$scope', 'ChartResource', 'ChartResourceIndexedDB',
  function($scope, ChartResource, ChartResourceIndexedDB) {
    $scope.charts = $.map(ChartResource.query(), function(i, resource) {
      chart = App.chart(resource)
      chart.draw();
      chart.setPersistence(ChartResourceIndexedDB);
      chart.save();
      return chart
    }
  }
]);
于 2014-06-07T08:57:28.840 に答える