我正在处理AngularJS(v1.6)+ Restangular(v1.6.1)单页应用程序,我正努力使2种不同的Restangular服务正常工作。
这个想法是从后端检索一个ProductTypes列表,然后是允许最终用户与之交互的每种类型的Products列表。
请记住,ProductTypes和Products API使用不同的基本URL。
我尝试了以下方法:
// 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。
关于javascript - 具有不同运行时配置的多个Restangular服务,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51045652/