javascript – 具有不同运行时配置的多个Restangular服务

2019年7月28日 172次阅读

我正在处理一个AngularJS(v1.6)Restangular(v1.6.1)单页面应用程序,我正在努力让2个不同的Restangular服务按照我的预期工作.

我们的想法是从后端检索ProductTypes列表,然后从最终用户可以与之交互的每种类型的产品列表中检索;
请记住,ProductTypes和Products API使用不同的基本URL.

The problem:

the products element transformers are never called: what am I doing wrong?

我尝试了以下方法：

// index.js file
// here I require everything the web-app needs...
angular.
  module('ProductReader', ['ui.router', 'restangular'])
  .config(ProductTypesConfig)
  .config(Routing)
  .service('ProductsRestangular', ProductsRestangular)
  .constant('PRODUCT_TYPES_CONST', PRODUCT_TYPES_CONST)
  .constant('PRODUCTS_CONST', PRODUCTS_CONST);

// PRODUCT_TYPES_CONST file
PRODUCT_TYPES_CONST = {
  API_URL: 'product_types_api',
  ENDPOINT: 'product_types'
};

module.exports = PRODUCT_TYPES_CONST;

// PRODUCTS_CONST file
PRODUCTS_CONST = {
  API_URL: 'products_api',
  TYPES: {}
    /**
     * here the structure built via the config below should be looking like the following 
     * TYPES: {
        PRODUCT_TYPE_1: {
          ENDPOINT: 'product_type_1'
        },
        PRODUCT_TYPE_2: {
          ENDPOINT: 'product_type_2'
        }
     }
    */
}

module.exports = PRODUCTS_CONST;

// ProductTypesConfig file
/** @ngInject */
function ProductTypesConfig(RestangularProvider, PRODUCT_TYPES_CONST, PRODUCTS_CONST) {

  RestangularProvider.setBaseUrl(PRODUCT_TYPES_CONST.API_URL);

  //ProductTypes
  RestangularProvider
    .addElementTransformer(PRODUCT_TYPES_CONST.ENDPOINT, false, function(productType) {

      PRODUCTS_CONST.TYPES[productType.name.toUpperCase()] = {
        ENDPOINT: productType.endpoint
      }

      //Products
      RestangularProvider
        .addElementTransformer(productType.endpoint, false, function(singleProduct) {
          let frontEndSingleProductStuff = {};

          // ... here stuff is added to the object above...

          return angular.extend(rw9Item, {
            frontEnd: frontEndSingleProductStuff
          });

        });

      return productType;
    });
}

module.exports = ProductTypesConfig;

// Products Custom Factory
/** @ngInject */
function ProductsRestangular(Restangular, PRODUCTS_CONST) {

  return Restangular.withConfig(function(RestangularConfigurer) {
    RestangularConfigurer.setBaseUrl(PRODUCTS_CONST.API_URL);
  });
}

module.exports = ProductsRestangular;

// Routing file
/** @ngInject */
function Routing($stateProvider, PRODUCT_TYPES_CONST) {

  $stateProvider
    .state('landing', {
      abstract: true,
      url: '/product-reader',
      resolve: {
        productTypes: function(Restangular, PRODUCT_TYPES_CONST) {
          return Restangular.all(PRODUCT_TYPES_CONST.ENDPOINT).getList();
        },
      }
    })
    .state('product-list', {
      parent: 'landing',
      url: '/list/{:productType}',
      resolve: {
        productLists: function($transition$, ProductsRestangular, PRODUCTS_CONST) {
          return ProductsRestangular.all(PRODUCTS_CONST[$transition$.params().productType].ENDPOINT).getList();
        }
      }
    });
}

最佳答案 多个Restangular API URL服务配置如下：

factory("service1", ["Restangular", function(restangular) {
  return restangular.withConfig(function(RestangularConfigurer) {

    RestangularConfigurer.setBaseUrl("http://localhost:8090/apiws");

  });

}]);


factory("service2", ["Restangular", function(restangular) {
  return restangular.withConfig(function(RestangularConfigurer) {

    RestangularConfigurer.setBaseUrl("http://localhost:8080/api");
    RestangularConfigurer.setDefaultHeaders({
      "Authorization": "Basic 123345667",
    });

  });

}]);

有关更多信息,请参阅官方docs

点赞