javascript - 是否有可能以良好的形式在 Angular 中重用相同的数据工厂？

Question

我正在查看 Angular 的 CRUD 通用工厂(我目前更倾向于使用服务):

app.factory('dataFactory', ['$http', function ($http) {
    var urlBase = '/odata/ContentTypes';

    // The _object_ defined in the factory is returned to the caller, rather than as with a service,
    // where the _function_ defined in the service is returned to the caller
    var dataFactory = {};

    dataFactory.getContentTypes = function () {
        var contentTypes = $http.get(urlBase);

        return contentTypes;
    };

    dataFactory.getContentType = function (id) {
        return $http.get(urlBase + '/' + id);
    };

    dataFactory.insertContentType = function (contentType) {
        return $http.post(urlBase, contentType);
    };

    dataFactory.updateContentType = function (contentType) {
        return $http.put(urlBase + '/' + contentType.ID, contentType);
    }

    dataFactory.deleteContentType = function (id) {
        return $http.delete(urlBase + '/' + id);
    }


    // to traverse navigation properties
    //dataFactory.getUserFromContentTypeId = function (id) {
    //    return $http.get(urlBase + '/' + id + '/user');
    //}


    //dataFactory.getOrders = function (id) {
    //    return $http.get(urlBase + '/' + id + '/orders');
    //};


    return dataFactory;

}]);

对于我的所有实体，此代码将大致相同。是否可以注入(inject)实体名称(或相应的 RESTful 路径)，如果可以，是否可以将其视为部分类，如果需要额外的 promise (例如遍历导航属性)，也可以注入(inject)它们？

如果 Angular 可以做到这一点，有人可以发布一些示例吗？

Answer 1

我个人喜欢保留我的代码 DRY而且我发现，如果您在服务器 API 上保持通用约定，您可以使用基础工厂/存储库/类或任何您想调用它的方式走很长的路。我在 AngularJs 中实现这一点的方法是使用返回基础存储库类的 AngularJs 工厂，即工厂返回带有原型(prototype)定义的 javascript 类函数而不是对象实例，我称之为 abstractRepository。然后，对于每个资源，我为该特定资源创建了一个具体的存储库，该资源典型地继承自 abstractRepository，因此我从 abstractRepository 继承了所有共享/基本功能，并定义了任何特定于资源的功能到具体的存储库。

我想举个例子会更清楚。假设您的服务器 API 使用以下 URL 约定(我不是最纯粹的 REST，所以我们将约定留给您想要实现的任何内容):

GET  -> /{resource}?listQueryString     // Return resource list
GET  -> /{resource}/{id}                // Return single resource
GET  -> /{resource}/{id}/{resource}view // Return display representation of resource
PUT  -> /{resource}/{id}                // Update existing resource
POST -> /{resource}/                    // Create new resource
etc.

我个人使用Restangular所以下面的例子是基于它的，但是你应该能够很容易地将它改编成 $http 或 $resource。

抽象存储库

app.factory('abstractRepository', [function () {

    function abstractRepository(restangular, route) {
        this.restangular = restangular;
        this.route = route;
    }

    abstractRepository.prototype = {
        getList: function (params) {
            return this.restangular.all(this.route).getList(params);
        },
        get: function (id) {
            return this.restangular.one(this.route, id).get();
        },
        getView: function (id) {
            return this.restangular.one(this.route, id).one(this.route + 'view').get();
        },
        update: function (updatedResource) {
            return updatedResource.put();
        },
        create: function (newResource) {
            return this.restangular.all(this.route).post(newResource);
        }
        // etc.
    };

    abstractRepository.extend = function (repository) {
        repository.prototype = Object.create(abstractRepository.prototype);
        repository.prototype.constructor = repository;
    };

    return abstractRepository;
}]);

具体的repository，我们以customer为例:

app.factory('customerRepository', ['Restangular', 'abstractRepository', function (restangular, abstractRepository) {

    function customerRepository() {
        abstractRepository.call(this, restangular, 'customers');
    }

    abstractRepository.extend(customerRepository);
    return new customerRepository();
}]);

然后在您的 Controller 中注入(inject)customerRepository:

app.controller('CustomerController', ['$scope', 'customerRepository', function($scope, customerRepository) {
    // Use your customerRepository
}]);

如果你使用这个基本存储库模式，你会发现你的大多数 CRUD Controller 也将共享很多通用代码，所以我通常创建一个基本 CRUD Controller ，我的 Controller 使用 $injector 从中继承.invoke，但我会省略这方面的示例，因为它超出了这个问题的范围。