在AngularJS中创建CRUD服务的最佳实践

发布时间：2020-12-17 17:14:19 所属栏目：安全来源：网络整理

导读：在处理单个和多个实体的AngularJS应用程序中设计CRUD服务/工厂的最佳实践是什么？例如,我在名为customerFactory的工厂中有一个客户对象,其中包含与此类似的结构： var customer = { newCustomer: false,selfUri: null,editUri: null,deleteUri: null,custom

在处理单个和多个实体的AngularJS应用程序中设计CRUD服务/工厂的最佳实践是什么？

例如,我在名为customerFactory的工厂中有一个客户对象,其中包含与此类似的结构：

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

并且我还在调用REST服务的工厂上公开了以下示例函数：

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',{} );
}

所有这些方法基本上都适用于工厂内的客户对象.

是否应将readAll()方法放入处理检索所有客户的不同服务/工厂,而不是在处理单个实体时放入上述工厂？是否应该将检索多个实体的REST调用放入其自己的工厂？

示例：customerFactory

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

        var customer = {
            newCustomer: false,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',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;

    }]);

解决方法

让我先说一下我对角度很新.话虽如此,您可以创建CustomerList和Customer服务中使用的CustomerClass. customerlist服务将返回一个数组,而客户服务将返回一个客户.即使我使用.factory()将它们添加到应用程序,它们也可用作服务.

请注意,CustomerClass仅返回没有new关键字的函数(class).这样您就可以在其他服务中自己实例化一个新的CustomerClass. self.init函数是构造函数,它将自动扩展您传入的对象的值.在声明下自动调用Self.init.

我在我的工厂中使用Self.ready,这样如果我使用ng-repeat,除非工厂的状态为ready = true,否则它不会显示.因为您是以ajaxy方式提取数据,所以在收到并准备好数据之前,您不希望用任何内容更新视图.

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",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;
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!