Angular $http CRUD operations with Factory Constructor model and data service

angular-data-service-layer_type-$http.js

angular.module('app', [
	'ngRoute'
]);

angular.module('app')
	.constant('API_URL', '/api');

angular.module('app').config(function($routeProvider) {
	$routeProvider
		.when('/books', {
			templateUrl: 'templates/books-http-3.html',
			controller: 'BooksController',
			controllerAs: 'booksCtrl',
			resolve: {
				onPrime: function(BooksResource) {
					return BooksResource.fetch();
				}
			}
		})
		.otherwise('/books');
});

// @decorator
angular.module('app').factory('ReaderModel', function() {
	return function(reader) {
		this.name = reader.name || 'Unnamed';
		this.weeklyReadingGoal = reader.weeklyReadingGoal || 0;
		this.totalMinutesRead = reader.totalMinutesRead || 0;
	}
});

angular.module('app').service('ReadersResource', function(API_URL, ReaderModel, $http) {
	var url = API_URL + '/readers';
	var _readers = [];
	return {
		fetch: function() {
			return $http.get(url, {cache:true}).success(function(resp) {
				_readers = resp;
				return _readers;
			});
		},
		findAll: function() {
			if (!_readers.length) {
				return this.fetch();
			} else {
				return _readers;
			}
		},
		findById: function() {},
		create: function(reader) {
			return $http.post(url, new ReaderModel(reader)).success(function(resp) {
				_readers.push(resp);
				return resp;
			});
		},
		// update one
		update: function(reader) {
			return $http.put(url + '/' + reader.reader_id, reader).success(function() {
				_readers[_.pluck(_readers, 'reader_id').indexOf(reader.reader_id)] = reader;
				return reader;
			});
		},
		'delete': function(reader) {
			return $http.delete(url + '/' + reader.reader_id).success(function() {
				_.remove(_readers, reader);
			});
		}
	}
});

angular.module('app').controller('ReadersController', function(ReadersResource) {
	this.title = "Readers";
	this.readers = ReadersResource.findAll();
});

angular.module('app').controller('ReaderController', function($scope, ReadersResource) {
	this.isEditing = false;
	this.delete = function() {
		ReadersResource.delete($scope.reader);
	}
});

angular.module('app').controller('CreateReaderController', function(ReadersResource) {
	this.form = {};
	this.create = function() {
		ReadersResource.create(this.form);
	}
});

angular.module('app').controller('EditReaderController', function($scope, ReadersResource) {
	this.temp = angular.copy($scope.reader);

	this.update = function() {
		if (!this.isClean()) {
			var updatedResource = _.merge($scope.reader, this.temp);
			ReadersResource.update(updatedResource).then(function() {
				$scope.readerCtrl.isEditing = false;
			});
		}
	};

	this.cancelUpdate = function() {
		$scope.readerCtrl.isEditing = false;
	};

	this.isClean = function() {
		return angular.equals(this.temp, $scope.reader);
	}
});

books-http.html

<div ng-controller="ReadersController as readersCtrl">
	<h1>{{readersCtrl.title}}</h1>

	<div ng-controller="CreateReaderController as createReaderCtrl">
		<form novalidate name="createReaderForm" ng-submit="createReaderCtrl.create()">
			<legend>Create</legend>
			<div><input type="text" name="name" ng-model="createReaderCtrl.form.name" /></div>
			<div><input type="text" name="goal" ng-model="createReaderCtrl.form.weeklyReadingGoal" /></div>
			<div><input type="text" name="minutes" ng-model="createReaderCtrl.form.totalMinutesRead" /></div>
			<button type="submit">Create</button>
		</form>
	</div>

	<div ng-repeat="reader in readersCtrl.readers" ng-controller="ReaderController as readerCtrl">
		<div ng-if="readerCtrl.isEditing === false">
			<div>{{reader.reader_id}}</div>
			<div>{{reader.name}}</div>
			<div>{{reader.weeklyReadingGoal}}</div>
			<div>{{reader.totalMinutesRead}}</div>
			<button ng-click="readerCtrl.isEditing = true">Edit</button>
			<button ng-click="readerCtrl.delete()">Delete</button>
		</div>
		<div ng-if="readerCtrl.isEditing === true">
			<div ng-controller="EditReaderController as editReaderCtrl">
				<form novalidate name="editReaderForm" ng-submit="editReaderCtrl.update()">
					<div><input type="text" name="name" ng-model="editReaderCtrl.temp.name" /></div>
					<div><input type="text" name="goal" ng-model="editReaderCtrl.temp.weeklyReadingGoal" /></div>
					<div><input type="text" name="minutes" ng-model="editReaderCtrl.temp.totalMinutesRead" /></div>
					<button type="submit">Update</button>
					<button ng-click="editReaderCtrl.cancelUpdate()">Cancel</button>
				</form>
			</div>
		</div>
	</div>

</div>