0

I'm just a beginner at AngularJS. I'm trying to construct a method call on my Angular data service, to which I pass an object that needs to be posted to the server. The Name of the data service is requestsRepository and the name of the controller is EnterNewRequestCtrl. My service has a method "postServiceRequest", to which I'm trying to pass my data object to be posted. When I call this methon from the controller, I get the following error: TypeError: Cannot call method 'postServiceRequest' of undefined at Scope.$scope.submitRequest (http://myhost.mydomain.com:9221/controllers/EnterNewRequestCtrl.js:9:28)

Here is a complete listing of both the service and the controller.

The service:

frontEndApp.factory('requestsRepository', function ($http) {

   var postServiceRequest =  function (ServiceRequest) {
        $http({
            url: 'http://localhost:8080/api/Customers',
            method: "POST",
            data: ServiceRequest,
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            //$scope.persons = data; // assign  $scope.persons here as promise is resolved here 
            console.log("postServiceRequest SUCCESS");
        }).error(function (data, status, headers, config) {
            //$scope.status = status;
            console.log("postServiceRequest FAILURE: " + status);
        });
    }
});

And now the controller:

angular.module('frontEndApp').controller('EnterNewRequestCtrl',function ($scope, requestsRepository) {
    $scope.RequestorName;
    $scope.RequestorBusinessUnit;
    $scope.submitRequest = function () {
        var ServiceRequest = {
            requestorName: $scope.RequestorName,
            requestorBusinessUnit: $scope.RequestorBusinessUnit
        };
        requestsRepository.postServiceRequest(ServiceRequest);
    }
  });

What is the proper way of implementing this controller - server method call?

1 Answer 1

2

You need to return an object with a postServiceRequest() method on it...

frontEndApp.factory('requestsRepository', function ($http) {

   var postServiceRequest =  function (ServiceRequest) {
        $http({
            url: 'http://localhost:8080/api/Customers',
            method: "POST",
            data: ServiceRequest,
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data, status, headers, config) {
            //$scope.persons = data; // assign  $scope.persons here as promise is resolved here 
            console.log("postServiceRequest SUCCESS");
        }).error(function (data, status, headers, config) {
            //$scope.status = status;
            console.log("postServiceRequest FAILURE: " + status);
        });
    };
    return { postServiceRequest : postServiceRequest };
});

-- Edit --

Once you get that working, you also should change postServiceRequest() to return the promise from the $http() call, then use that promise in your controller to populate the variables on the $scope...

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

frontEndApp.factory('requestsRepository', function ($http) {

   var postServiceRequest =  function (ServiceRequest) {
        return $http({
            url: 'http://localhost:8080/api/Customers',
            method: "POST",
            data: ServiceRequest,
            headers: { 'Content-Type': 'application/json' }
        });
    };
    return { postServiceRequest : postServiceRequest };
});

frontEndApp.controller('EnterNewRequestCtrl',function ($scope, requestsRepository) {
    $scope.RequestorName;
    $scope.RequestorBusinessUnit;
    $scope.submitRequest = function () {
        var ServiceRequest = {
            requestorName: $scope.RequestorName,
            requestorBusinessUnit: $scope.RequestorBusinessUnit
        };
        requestsRepository.postServiceRequest(ServiceRequest)
            .success(function (data, status, headers, config) {
                //$scope.persons = data; // assign  $scope.persons here as promise is resolved here 
                console.log("postServiceRequest SUCCESS");
            }).error(function (data, status, headers, config) {
                //$scope.status = status;
                console.log("postServiceRequest FAILURE: " + status);
            });
    };
});
1
  • No worries... might be some subtle errors in the code still but that should be the idea. Feb 14, 2014 at 1:37

Your Answer

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

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