Angularjs的Active Record或Data Mapper模式?

我对Angular非常陌生,所以我希望我足够了解问什么似乎是一个合理的设计问题。

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

现在我正在使用Angular,将图表函数放入'Chart'资源,Active Record风格是很诱人的,这样我就可以绘制,保存,更新等等。

虽然这种模式的优点是简单,但缺点是将持久性与行为耦合在一起。 例如,如果我想将图表设置保存到本地存储,那将非常尴尬。

已经在我的职业生涯中被足够多的AR咬过了,我想通过离开我的图表对象,并让控制器将数据从资源传递到我的图表中去。

然而! 我对于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。

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


DataMapper策略实际上已经是一种依赖注入的形式。 要传递所需的持久性实现的图构造函数,你可以通过以每个在不同的一个new基础。 非DI方式将是对持久性实现进行硬编码,就像你的ActiveRecord风格的例子。

在Angular.JS特有的术语意义上,DataMapper不是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
    }
  }
]);
链接地址: http://www.djcxy.com/p/14585.html

上一篇: Active Record or Data Mapper pattern for Angularjs?

下一篇: reading in a loop