Recommendations for creating CRUD services in AngularJS

Question

What is the best practice for designing CRUD services / factories in an AngularJS application that processes single and multiple entities ?

For example, I have an object customerin a factory called customerFactorythat contains a structure like this:

var customer = {
    newCustomer: false,
    selfUri: null,
    editUri: null,
    deleteUri: null,
    customerName: null,
    customerAddress: null
};

And I also have the following sample functions exposed at this factory that invoke REST services:

var create = function() {
    $http.post('api/customers/1', { customer: customer } );
}

var read = function() {
    $http.get('api/customers', { params { uri : customer.selfUri } );
}

var update  = function() {
    $http.put('api/customers/1', { customer: customer } );
}

var delete = function() {
    $http.delete('api/customers/1', { uri: customer.deleteUri } );
}

// This is an oddity and probably shouldn't be in this factory??
var readAll = function() {
    $http.get('api/customers', {} );
}

All these methods basically work with the object customerin the factory.

readAll() /factory, , factory, ? REST-, , factory?

: customerFactory

// Deal with single customer entities
app.factory('customerFactory', ['$http',
    function($http) {
        var customerFactory = {};

        var customer = {
            newCustomer: false,
            selfUri: null,
            editUri: null,
            deleteUri: null,
            customerName: null,
            customerAddress: null
        };

        var create = function() {
            $http.post('api/customers/1', { customer: customer } );
        }

        var read = function() {
            $http.get('api/customers', { params { uri : customer.selfUri } );
        }

        var update  = function() {
            $http.put('api/customers/1', { customer: customer } );
        }

        var delete = function() {
            $http.delete('api/customers/1', { uri: customer.deleteUri } );
        }

        customerFactory.create = create;
        customerFactory.read= read;
        customerFactory.update= update;
        customerFactory.create = delete;

       return customerFactory;

    }]);

: customersFactory

// Deal with multiple customer entities
app.factory('customersFactory', ['$http',
    function($http) {
        var customersFactory = {};
        var customers = {};

        var readAll = function() {
        $http.get('api/customers', {} ).then(function(response) {
            customers.push(response.data);
        });

        customersFactory.readAll = readAll;

        return customersFactory;

    }]);

Answer 1

, , angular. CustomerClass, CustomerList Customer. customerlist , . .factory(), .

, CustomerClass () . , CustomerClass . self.init , . Self.init .

Self.ready , , ng-repeat, , factory ready = true. , , .

myApp.factory("CustomerClass", function ($http) {
    function CustomerClass(extendableObject) {

        var self = this;
        self.init = function () {
            //will extend newCustomer, selfUri, editUri etc... fields
            angular.extend(self, extendableObject);
        };
        self.init();
    }

    return CustomerClass;
});

myApp.factory("CustomerListService", function ($http, CustomerClass) {
    function CustomerList() {
        var self = this;
        self.ready = false;
        //return array of customer objects
        self.readAll = function () {
            var customers = [];
            $http.get('api/customers/list')
                .success(function (payload) {
                    angular.forEach(payload.customers, function (customer) {
                        customers.push(new CustomerClass(customer));
                    });
                    self.ready = true;
                    return customers;
                });
        };
    }

    return new CustomerList;
});

myApp.factory("CustomerService", function ($http, CustomerClass) {

    function Customer() {
        var self = this;
        self.ready = false;
        //return one customer object
        self.read = function (id) {
            $http.get('api/customers/single', {params: {id: id}})
                .success(function (payload) {
                    return new CustomerClass(payload);
                    self.ready = true;
                });
        };
    }

    return new Customer;
});

Answer 2

, $resource, .

, , , GET, PUT, DELETE & UPDATE

Factory

var app = angular.module('mainApp',['ngResource']);
app.factory('Customer', function($resource) {
  return $resource('/api/customers/:id'); // Note the full endpoint address
});

app.controller('CustomerController', function($scope, Customer) {
    var customer = Customer.get({ id: $scope.id }, function() {
        console.log(customer);
    }); // get() returns a single entry

    var customers = Customer.query(function() {
        console.log(customers);
    }); //query() returns all the customers

    $scope.customer = new Customer(); //You can instantiate resource class

    $scope.customer.data = 'some data';

    Customer.save($scope.customer, function() {
        //data saved. do something here.
    }); //saves an customer. Assuming $scope.customer is the Entry object  
});

, . $resource REST API

$http , customerFactory, , . angular.constant, , , .

Constant

app.constant('customerMethods', [
            {name: 'create', type: 'post', url: 'api/customers/1', dataParam:{ customer: customer }},
            {name: 'read', type: 'get', url: 'api/customers', dataParam:{ params: { uri : customer.selfUri }},
            {name: 'create', type: 'post', url: 'api/customers/1, dataParam:{ customer: customer }}, //you need to provide customer object
            {name: 'create', type: 'post', 'api/customers/1', dataParam: { customer: customer }},//you need to provide customer object
]);

Factory

app.factory('customersFactory', ['$http', 'customerMethods', 'customer',
    function($http, customerMethods, customer) {
        var customersFactory = {};
        var customers = {};
        var customerMethods = customerMethods;

        angular.forEach(customerMethods, function(val, index) {
            angular.extend(customersFactory, {
                val.name: function() {
                    return $http[val.type](val.url, val.dataParam);
                }
            });
        });

        return customersFactory;

    }
]);

. , , .

, . .