How to call a resource in a service through a controller in angularjs

Question

I want to send the data in my controller to the database via service, but I use a $resource in a service and I don't know how to call it from the controller, below is my controller,

 angular.module('dashboard').controller('DashboardCtrl',['dashboardResource',DashboardCtrl]);

    function DashboardCtrl(dashboardResource){
     var vm = this;

        vm.payments = [
            {
                "paymentId":1,
                "date":"2015/09/13 12.36PM",
                "name":"HSBC Bank",
                "ID": 123456,
                "amount": 1000.00,
                "status": "Active"
            }]
 vm.payments = dashboardResource.get({name: vm.payments.name}, function(payments) {

          payments = vm.payments();
      });
    }

Below is my service

angular.module('lgpsService').factory('dashboardResource',[
        "$resource",dashboardResource]);

    function dashboardResource($resource) {
        return $resource('api/Payment/makePayment');
    }

Please help me to resolve this issue.

Answer 1

First you need to mention ngResource as a dependency in your lgpsService like this

angular.module('lgpsService',['ngResource'])
       .factory('dashboardResource',['$resource',dashboardResource]);

Also you need to angular-resource.js to your HTML page after angular.js.

As your dashboardResource factory is in a different module lgpsService, you need to mention that module as a dependency in your main module like this

angular.module('dashboard',['lgpsService'])
       .controller('DashboardCtrl',['dashboardResource',DashboardCtrl]);

Change your controller function to call save() on your resource object which in turn will make a POST request to that URI.

function DashboardCtrl(dashboardResource){
     var vm = this;

        vm.payments = [
            {
                "paymentId":1,
                "date":"2015/09/13 12.36PM",
                "name":"HSBC Bank",
                "ID": 123456,
                "amount": 1000.00,
                "status": "Active"
            }]
   var payments = dashboardResource.save({name: vm.payments.name}, 
        function() {
             /*success callback. By this time `payments` object is augmented
             with the response from your POST call */
             vm.payments = payments;
      });
}

Another important thing to note is that the return type of any method get/save from $resource is promise object and also it has all the fields copied from the original HTTP response.

Answer 2

I want to send the data in my controller to the database via service

I am not sure if you want to post or get data or here via factory resource. I am going to answer to have both the methods. You can call it via controller in following way and you need to make some changes in service as well.

Your service will be like below

     var app = angular.module('lgpsService').factory('dashboardResource',[
               "$resource",dashboardResource]);

     app.factory('dashboardResource', function($resource) {
             return $resource(
                     'api/Payment/makePayment',
                     {},
                     {
                        'post' {
                             method: 'POST' //To post data
                         },
                         'get' {
                             method: 'GET' //To get data
                          }
                     }
                 );
             });

Your controller

angular.module('dashboard',['lgpsService']).controller('DashboardCtrl',['dashboardResource',DashboardCtrl]);

    function DashboardCtrl(dashboardResource){
     var vm = this;

        vm.payments = [
            {
                "paymentId":1,
                "date":"2015/09/13 12.36PM",
                "name":"HSBC Bank",
                "ID": 123456,
                "amount": 1000.00,
                "status": "Active"
            }]

          //Call service to post data
          dashboardResource.post( vm.payments                                 
                    function(){
                        console.log('data saved successfully');
                    },
                    function(error){
                        AlertService.add( "Error saving data " + error.data);
                        
                    }         
          )
          
          //Call service to get data
         
           dashboardResource.get().
            $then(
                  function(response) {
                    //Do your stuff with data here
                    console.log( response.data );
            },
            function(error) {
                console.log(error);
            }
        );
    }

Hope this helps to you