Question

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);
        });
    });

我上面有一个控制器消耗并返回我休息的所有产品。现在我想创建另一个带参数（字符串）的控制器并尝试使用此参数并使用此Web服务（'http://localhost:8080/Products/ProductName/parameter'。根据参数是什么，服务应返回特定产品我怎么能这样做？我正在尝试创建一个服务javascript文件来使用我剩下的所有api资源。谢谢。

Answer 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;
});

现在您需要将上述工厂注入您的Controller：

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

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

例如，您可能有另一个视图，只需单击按钮即可获取产品信息。所以重新使用你的工厂你可能有第二个控制器如下：

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>

我希望这会有所帮助。

如何创建将参数传递给其余Web服务的控制器

1 个答案: