很少有角服务，只有常数不同

Few angular services, differing only in constants

本文关键字：常数不 服务      更新时间：2023-09-26

我对angularjs很陌生，我需要做以下事情：我有几个局部视图，每个视图都包含简单的配置表单，需要将其提取/PUT到服务器。

每个视图都有一个控制器，每个控制器都有相应的服务，负责对给定的后端端点执行GET/PUT请求。

服务现在只在端点url上有所不同。

问题是：您将如何避免以下情况

var providerConfigService = function ($http) {

    this.fetchConfig = function (endpointUrl, success, failure) {
        $http.get(endpointUrl)
            .success(function (data) {
                success(data)
            })
            .error(function (data, status) {
                failure(status)
            });
    };

    this.updateConfig = function (endpointUrl, config, success, failure) {
        $http.put(endpointUrl, config)
            .success(function (data, status) {
                success()
            })
            .error(function (data, status) {
                failure(status)
            });
    }
};
var facebookConfigService = function (providerConfigService) {
    var facebookEndpoint = "";
    this.fetchConfig = function (success, failure) {
        providerConfigService.fetchConfig(facebookEndpoint, success, failure)
    };
    this.updateConfig = function (config, success, failure) {
        providerConfigService.fetchConfig(facebookEndpoint, config, success, failure)
    };
};
// POTENTIALLY DUPLICATED CODE FOR OTHER VIEWS
// SERVICE REGISTERING

我更像是一个Java爱好者，所以我会在Java和Spring世界中做这样的事情：

提供endpointUrl作为构造函数参数，然后创建一个Factory类或仅声明预配置的bean。

我正在角世界中寻找类似的解决方案。我应该使用angular的工厂/供应商吗？如果是，如何这可能很直接，但我对angular的服务/控制器/工厂/供应商很困惑。

通常在有角度的世界中，您会尝试使用ng资源。如果你的API是RESTful和基本的，我会推荐ng-resource。如果没有，那么你所做的一切都没关系，但通常这些获取和投入都只是在提供服务本身中。你只是在把成功和失败搞得干干净净，但现实是，这些可能无论如何都会有所不同。

您可以使用Factory（阅读更多）并在控制器中配置它。您还可以通过使用promise而不是传递回调来改进流。

   angular.module('yourapp')
   .factory('configFactory', function ($http) {
     return {
       endpointURL: "", // this is what you modify
       fetchConfig: function () {
        $http.get(this.endpointURL)
       },
       updateConfig: function (config) {
         $http.put(this.endpointURL, config)
       }
     };
   })
   //and your controller
   .controller('someCtrl', function($scope, configFactory){
     configFactory.endpointURL = 'http://customurl.com';
     // configFactory will use the endpointURL defined by this controller
     $scope.fetchConfig = function(){ 
       configFactory.fetchConfig().then(function(){}).catch(function(){});
     }
   })
   // and another
   .controller('someCtrl', function(configFactory){
     configFactory.endpointURL = 'http://anotherurl.com
   })

好的，所以我得到了以下结果：

我的ng资源：

var ConfigurationResource = function ($resource, endpointUrl) {
    var allowedMethods = {
        'get': {
            method: 'GET'
        },
        'update': {
            method: 'PUT'
        }
    };
    return $resource(endpointUrl, {}, allowedMethods);
};
var FacebookProperties = function ($resource) {
    return ConfigurationResource($resource, 'my.facebook.endpoint.url');
};

在我的控制器中有一个复制代码的问题，所以现在看起来如下：

var PropertiesController = function (scope, propertiesResource) {
    this.fetchProperties = function () {
        propertiesResource.get(function (fetchedProperties) {
            scope.properties = fetchedProperties;
        });
    };
    this.updateProperties = function () {
        propertiesResource.update(scope.properties)
    };
    scope.properties = {};
    scope.fetchProperties = this.fetchProperties;
    scope.updateProperties = this.updateProperties;
    scope.fetchProperties();
};
var facebookConfigController = function ($scope, FacebookProperties) {
    new PropertiesController($scope, FacebookProperties);
};

也许这不是正确的方法，但至少它有效，而且几乎没有样板。

相关文章：