Unit of Work AngularJS

Question

I am writing an application in Angular JS (1.5), and I need to be able to track a model for changes (updates/deletes/additions). For example, I have an ng-model that holds an array of user pets. This array has 5 pets, but the user (from the front end) can delete pets from that model or add more pets. I want to be able to keep track of what pets were removed from the array and what pets were added, so that I can remove the deleted pets from the database, leave the unchanged pets, and add the new pets. I would assume I need 2 operations for this - delete and insert, but I am not sure how to go about this.

How would I best keep track of these changes in Angular? I would like to follow the "unit of work" pattern, but I am not sure how to go about this in Angular and Javascript. I was thinking of using 3 arrays; one for existing data, one for deleted data, and one for new data. I would then send the deleted and inserted data for the post request. Does that make sense?

Answer 1

Since you are only looking for the update/delete and additions it would be relatively easier to store the status of the object. It would be easier than storing it in 3 different lists, the model binding would be easier.

Unit of work pattern not necessary here(client side).

When it's time to update the database, you could use the status to update / delete or insert the record to the DB and you could use unit of work pattern (in the server).

Answer 2

I don't see the point of watching the model to update, does that mean that every time the user will change one fields you will trigger an update in the database ? How do you handle two list data like country/city then ?

Just use what angular give you to handle forms properly.

Basically considering we're manipulating an array of object inside a ng-repeat your code will look like this :

<form name="myForm">
    ... ng-repeat="item in items" ...
    // make a name unique so the validation is unique to each item fields
    <input type="text" ng-model="item.name" required name="{{'name'+$index}}"/>
    <button ng-disabed="myForm.$invalid" ng-click="updateItemInDatabase(item)">Update</button>
    <button ng-disabed="!item" ng-click="deleteItemInDatabase(item)">Delete</button>

Note if you use angular-resource you can even change the updateItemInDatabase to item.$update() deleteItemInDatabaseto item.$delete(). So no need to declare update/delete function in the controller's scope to trigger query ot the server, just load your list of resources in your controller, and you're done.

Answer 3

Keeping two arrays one for delete and one for insertion seems a good idea to me and these arrays can be easily maintained with $watch where you can check old and new value. For example:-

var scope = $rootScope;
scope.$watch('petsArray', function(newValue, oldValue) {
   if ( newValue !== oldValue ) {
      //Do your changes
    }
});

Sending requests on every insert and delete will increase the number of hits on the server.

Answer 4

I think you can use callback handler on each delete and add operations, and then on each handler you can push the deleted and added items into the delete and add collection respectively by looking-up the main master/original collection, when it comes the time to store the data in database you can easily store the item from delete and add collection this way you can keep track of the items which are deleted and added.

so for example:

<div ng-repeat="item in items">
  <item>
    <span ng-click="onDelete(item)">delete</span>
  </item>
</div>

<span ng-click="onadd(item)">add</span>

scope.onDelete = function(item) {
   scope.items.splice(scope.items.indexOf(item), 1);
   deletedItems.push(item);
};

scope.onAdd = function(item) {
   scope.items.push(item);
   addedItems.push(item);
};

function storeInDataBase() {
  send(deletedItems, addedItems);
  deletedItems = []; addedItems = [];
}