如何创建将参数传递给 REST Web 服务的控制器答案

【问题标题】：How do I create a controller that passes a parameter to a rest web service如何创建将参数传递给 REST Web 服务的控制器
【发布时间】：2016-10-08 11:34:34
【问题描述】：

myApp.controller('consumeProduct', function($scope, $http, $log) {    
        $http({
            method: 'GET',
            url: 'http://localhost:8080/Products'
        }).then(function(response) {  
            $scope.products = response.data;
            $log.info(response);
        });
    });

我上面有一个控制器，它从我的 rest api 消费并返回所有产品。现在我想创建另一个带有参数（字符串）的控制器并尝试使用这个参数并使用这个 Web 服务（'http://localhost:8080/Products/ProductName/parameter'。根据参数是什么，服务应该返回一个特定的产品。如何我可以这样做吗？我正在尝试创建一个服务 javascript 文件来消耗我所有的其余 api 资源。谢谢。

【问题讨论】：

您需要为此创建一个service 并使用来自控制器/组件的服务。 Check this answer 。你确定你使用的是angular2吗？无论如何，答案中也有 Angular1 示例。再次，获取 urlParameters 检查路由是如何工作的。
感谢 Sabithpocker 的回复。我已经有一个带有产品名称字符串参数的服务（'localhost:8080/Products/ProductName/<product_name>）。我只是想使用该服务，但是在使用它时无法将产品名称从 Angular 2 传递给该服务。例如，服务将在消费localhost:8080/Products/ProductName/apple 时返回apple，或在消费localhost:8080/Products/ProductName/banana 时返回banana。我可以使用上面的控制器使用一个静态 URI，但无法将参数传递给我的 Web 服务。

标签： javascript angularjs rest

【解决方案1】：

正如 sabithpocker 所建议的，控制器应该只用于更新您的视图。您可能希望为您的 $http 请求使用服务或工厂。下面是一个可能的实现示例：

myApp.factory('ProductFactory', function($http, $log) {

    var ProductFactory = {};

    ProductFactory.getProduct = function(productName) {
        return $http({
                method: 'GET',
                url: 'http://localhost:8080/Products/ProductName/' + productName
            })
            .then(function(response) {
                return response.data;
            })
            .catch($log.err);
    }

    return ProductFactory;
});

现在您需要将上述工厂注入到您的控制器中：

myApp.controller('ProductCtrl', function($scope, $log, ProductFactory) {
    ProductFactory.getProduct('apple')
        .then(function(returnedProduct) {
            $scope.product = returnedProduct;
        })
        .catch($log.err);
});

如果您为 $http 进程使用工厂或服务，那么您可以在需要时随意重用它们（以及其他控制器）。

例如，您可能有另一个视图，您希望在单击按钮时获取产品信息。所以重用你的工厂你可能有第二个控制器，如下所示：

myApp.controller('ProductListCtrl', function($scope, $log, ProductFactory) {
    $scope.productClick = function(productName) {
        ProductFactory.getProduct(productName)
            .then(function(returnedProduct) {
                $scope.product = returnedProduct;
            })
            .catch($log.err);
    }
})

在你的 html 中：

<td><button ng-click="productClick(product.name)">Show product</button></td>

我希望这会有所帮助。

【讨论】：

谢谢，上面的例子很完美！