1

I'm fairly new to Angular but am trying to abstract a RESTful call from $http to a factory/resource but I cant seem to pass any params to it. I've read though SO but cannot find an example of this.

My factory code (services.js):

myApp.factory("PropertyDb", function($resource, $log) {
return {
    getProperties: function(onSuccess) {
        var properties = $resource("http://myurl.com/get_properties.php?", {
            callback: 'JSON_CALLBACK',
            postcode: 'AA11AA',
            minimum_beds: '3',
            minimum_price: '97500'
        }, 

        {
            fetch : {method:'JSONP'},
            params: {postcode: 'BB11BB'} // This doesn't override the above or work without the above postcode

        });

        properties.fetch(
            function success(response) {
                console.log(response);
                onSuccess(response.listing);
            }, 
            function error(response) {
                console.log(response);
                console.log("error");
            }
        );
    },

My Controller code:

myControllers.controller('PropertyListCtrl', ['$scope', 'PropertyDb',
function($scope, PropertyDb) {

    $scope.properties = {};

    // Adding the postcode below doesnt work...
    PropertyDb.getProperties({postcode : 'CC11CC'}, function(responce) {
        $scope.properties = responce;
    });

}]);

I want to be able to use my factory in my controllers and pass it different params like postcode etc and override the defaults set in the factory. No matter what I try I cannot seem to do this and the docs aren't very easy to follow.

3 Answers 3

6

From your example you passed 2 parameters to PropertyDb.getProperties:

  • postcode Object: {postcode : 'CC11CC'}
  • callback: function(responce) {$scope.properties = responce;}

The one thing is to use 1st parameter in factory:

myApp.factory("PropertyDb", function($resource, $log) {
return {
    getProperties: function(parameter, onSuccess) {
    //                       ^param^ , ^callback^         

    /* ...  */
    }

So fixed version of service should be:

myApp.factory("PropertyDb", function($resource, $log) {
return {
    getProperties: function(parameter, onSuccess) {
        var properties = $resource("http://myurl.com/get_properties.php?", {
            callback: 'JSON_CALLBACK',
            postcode: parameter.postcode,
            minimum_beds: '3',
            minimum_price: '97500'
        }, 

        {
            fetch : {method:'JSONP'},
            params:  parameter 
        });

        properties.fetch(
            function success(response) {
                console.log(response);
                onSuccess(response.listing);
            }, 
            function error(response) {
                console.log(response);
                console.log("error");
            }
        );
    },
     /*...*/
   }
});
8
  • Sorry, this doesn't work. The AA11AA postcode still gets used on all calls dispite what I pass from the controller.
    – Jimothey
    Feb 16, 2014 at 9:16
  • See my edit, i changed also $resource call with parameter Feb 16, 2014 at 9:21
  • Great, that worked - I take it I dont need the second params: (parameter.postcode) ? parameter : {postcode: 'BB11BB'} now do I ? as the postcode will only be set from the controller or use the fallback AA11AA
    – Jimothey
    Feb 16, 2014 at 9:29
  • its just validation that if you didn't provide proper value it will take default one Feb 16, 2014 at 9:42
  • I mean, if I have it in the resource (see the postcode part with AA11AA) do I need it in the second params object (BB11BB)?? I dont need that second one after the fetch do I?
    – Jimothey
    Feb 16, 2014 at 9:48
1

Try:

myApp.factory("PropertyDb", function($resource, $log) {
return {
    getProperties: function(data,onSuccess) { //add 1 more parameter
        var properties = $resource("http://myurl.com/get_properties.php?", {
            callback: 'JSON_CALLBACK',
            postcode: 'AA11AA',
            minimum_beds: '3',
            minimum_price: '97500'
        }, 
        {  //fix your code here
            fetch : {
             params: data || {postcode: 'BB11BB'},
             method:'JSONP'
            }
        });

        properties.fetch(
            function success(response) {
                console.log(response);
                onSuccess(response.listing);
            }, 
            function error(response) {
                console.log(response);
                console.log("error");
            }
        );
    },

But I think a better solution is we only define the $resource once:

myApp.factory("PropertyDb", function($resource, $log) {
    //define only once here so we don't need to redefine it whenever we run the method.
    var properties = $resource("http://myurl.com/get_properties.php?", {
                callback: 'JSON_CALLBACK',
                postcode: 'AA11AA',
                minimum_beds: '3',
                minimum_price: '97500'
            }, 
            {  //fix your code here
                fetch : {
                 params: {postcode: 'BB11BB'},
                 method:'JSONP'
                }
            });

    return {
        getProperties: function(data,onSuccess) { //add 1 more parameter

            properties.fetch(
                data, //send the data.
                function success(response) {
                    console.log(response);
                    onSuccess(response.listing);
                }, 
                function error(response) {
                    console.log(response);
                    console.log("error");
                }
            );
        },
4
  • And what should I pass in the controller - my {postcode: CC11CC} in the controller doesn't work still. AA11AA is still being used for the call.
    – Jimothey
    Feb 16, 2014 at 9:11
  • @James J: did you add 1 more parameter in the function? getProperties: function(data,onSuccess)
    – Khanh TO
    Feb 16, 2014 at 9:13
  • Yes - getProperties: function(data, onSuccess) {
    – Jimothey
    Feb 16, 2014 at 9:17
  • @James J: it should work, check my updated answer and try clearing browser cache
    – Khanh TO
    Feb 16, 2014 at 9:23
0

I got it, you can use app.factory() as a separate js file to read a file, say get_data.js. The parameter arg is a file path(now is a web file, you can change it to a relative file path, like js/abc.txt).

var app = angular.module('app', []);

// this part can separate from others as a single file - get_data.js
app.factory('metdata', ['$http', function ($http) {
  var load_data = {};  // This is like a new class in factory
  load_data.getDataPath = function (arg) {  // This is like a method of class
    console.log(arg);
    load_data.path = arg;  // This is like a attribute of class
      return $http.get(load_data.path);
  };
  console.log('print 1 ' + load_data.data);

  return load_data;  // Call the class, and then call getDataPath function

}]); 

app.controller('MainCtrl', ['$scope', 'metdata', function($scope, metdata) {
  $scope.loadData = function () {
    var dataPath = 'https://raw.githubusercontent.com/OnlyBelter/learnGit/master/readme.txt';
    metdata.getDataPath(dataPath).success(function (data) {
      console.log(data);
    });
  };
}]);
<!--this is html file-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
    <br>
    <div>
        <p>Load data:
            <button ng-click="loadData()">Load</button>
        </p>
    </div>
</body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.