Active Record or Data Mapper for Angularjs?

Question

I am very new to Angular, so hopefully I know enough to ask what seems like a reasonable design issue.

I draw some data through Angular, and use $ resource. Before bringing Angular to the project, I created a factory diagram function to create diagram objects from the json sample data that I just inserted into the view.

Now, when I use Angular, it forces to force the graphic functions in the "Chart" resource, in the style of Active Record, so I have one thing that can draw, save, update, etc.

While the advantage of this pattern is simplicity, the disadvantage is the constant connection with behavior. For example, it would be rather inconvenient if I wanted to save the diagram settings in local storage.

Having been bitten by AR enough times in my career already, I want to go with DM, leaving my chart object as is, and having the controller transfer the data from the resource to my chart.

But! My vague understanding of angularjs dependency injection suggests that I could create a resource, or some of them that could take a common persistence interface, is the correct word "scope"?

Example AR Strategy:

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() }) }) } ]) 

Example DM Strategy:

 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 } } ]) 

I think there is a third way, however, that I do not see, because I do not quite understand how to use DI.

In other words, what is the AngularJS method for creating an object with save-and-replace strategies?

Answer 1

The DataMapper strategy is actually already a form of dependency injection. You pass the required save implementation to the chart constructor, and you can pass another option based on new . The non-DI path will consist of hard coding the persistence implementation, as in the example with the ActiveRecord example.

DataMapper is not a DI in the specific sense of Angular.JS. Angular DI really does not allow you to swap implementations at runtime. However, you can use the official ngMock for this. NgMock is supposed to be used for testing, so this is probably not a terrific idea outside of this scenario.

There seems to be no Angular.JS-specific convention for this kind of thing. In fact, Angular.JS doesn't really have many conventions at all.

Instead of passing the implementation in the constructor, you can at any time suggest a separate method for changing the storage mechanism. For example, to use ChartResource for an initial network-based search, replace it with IndexedDB for local storage:

 // 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 } } ]);