angularjs - Angularjs 的事件记录或数据映射器模式？

Question

我对 Angular 很陌生，所以希望我知道的足够多，可以问什么似乎是合理的设计问题。

我正在通过 Angular 绘制一些数据，并且正在使用 $resource。在将 Angular 引入项目之前，我创建了一个图表工厂函数，用于从我刚刚粘贴到 View 中的示例 json 数据创建图表对象。

现在我正在使用 Angular，很想将图表功能放入“图表”资源中，即 Active Record 样式，这样我就有了一个可以绘制、保存、更新等的东西。

虽然该模式的优点是简单，但缺点是将持久性与行为相结合。例如，如果我想将图表设置保存到本地存储，那会很尴尬。

在我的职业生涯中已经被 AR 咬了足够多的时间，我想与 DM 保持一致，让我的图表对象保持原样，让 Controller 将数据从资源传递到我的图表中。

然而!我对 angularjs 依赖注入(inject)的模糊理解表明我可能能够创建一个资源或一些可以接受通用持久性接口(interface)的资源 - 正确的词是“范围”吗？

示例 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。

换句话说，AngularJS 用可交换持久性策略创建对象的方法是什么？

Answer 1

DataMapper 策略实际上已经是依赖注入(inject)的一种形式。您正在将所需的持久性实现传递给 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
    }
  }
]);