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

I have a controller above that consumes and returns all products from my rest api. Now I would like to create another controller that takes a parameter(a string) and try to use this parameter and consume this web service('http://localhost:8080/Products/ProductName/parameter'. Based on what the parameter is, the service should return a specific product. How would I be able to do this? I'm trying to create a services javascript file to consume all of my rest api resources. Thanks.

e666
  • 1,305
  • 11
  • 20
user2789880
  • 107
  • 1
  • 1
  • 7
  • You need to create a `service` for that and consume the service from controller/component. [Check this answer](http://stackoverflow.com/a/37515797/427146) . Are you sure you are using angular2? Angular1 example is also there in the answer anyway. Again, to get urlParameters check how routing works. – sabithpocker Oct 08 '16 at 11:41
  • Thanks for the reply Sabithpocker. I already have a service('http://localhost:8080/Products/ProductName/) that takes a product name string parameter . I'm just trying to consume the service but is having trouble passing a product name to the service from angular 2 when consuming it. For example, the service will return apple when consuming http://localhost:8080/Products/ProductName/apple or banana when consuming http://localhost:8080/Products/ProductName/banana. I'm able to consume one static URI using the controller above but having trouble passing a parameter to my web service. – user2789880 Oct 08 '16 at 11:52

1 Answers1

2

As suggested by sabithpocker, Controllers should only be used to update your view. You may want to use a Service or a Factory for your $http requests. Below is an example of a possible implementation: 

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

Now you need to inject the above factory into your Controller:

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

If you use a Factory or Service for your $http processes, then you may reuse them at will whenever needed (and for other Controllers as well).

For example you may have another view where you want to obtain product information just when clicking on a button. So reusing your Factory you may have a second controller as follows:

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

And in your html:

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

I hope this helps.

Aibu
  • 401
  • 5
  • 10