How do I convert $http.post response to $resource in angularjs?

Question

I want to convert $http.post response to $resource. I am using REST API so for that I have to use $resource. My code is working with $http, Any idea how do I achieve this with $resource? Here is the code.. Thanks

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

function StudentController($scope, $http){
  var loadStudents = function(){
    $scope.students = [];

    $http.get('/students.json').success(
      function(response, status, headers, config){
        $scope.students = response.students;
      }
    ).error(function(response, status, headers, config){
      $scope.error_message = response.error_message;
    });
  }

  $scope.newStudent = function(){
    $scope.enterNew = true;
    $scope.editing = false;
    $scope.student = {};
  };
  
  $scope.createStudent = function(){
    $http.post('/students.json', {"student": $scope.student})
      .success(function(response, status, headers, config){
          $scope.students.push(response.student);
          $scope.enterNew = false;
          $scope.editing = false;
        })
      .error(function(response, status, headers, config){
        $scope.error_message = response.error_message;
      });
  }

  $scope.editStudent = function(student){
    $scope.enterNew = false;
    $scope.editing = true;
    $scope.student = student;
  };
  
  $scope.updateStudent = function(){
    $http.put('/students/' + $scope.student.id + '.json', {"student": $scope.student})
      .success(function(response, status, headers, config){
          $scope.student = response.student;
          $scope.enterNew = false;
          $scope.editing = false;
        })
      .error(function(response, status, headers, config){
        $scope.error_message = response.error_message;
      });
  };

  $scope.cancelSave = function(){
    $scope.enterNew = false;
    $scope.editing = false;
    $scope.student = {};
  };

  
  $scope.deleteStudent = function(student){
    $http.delete('/students/' + student.id + '.json')
      .success(function(response, status, headers, config){
          var index = $scope.students.indexOf(student);
          $scope.students.splice(index,1);
      })
      .error(function(response, status, headers, config){
        $scope.error_message = response.error_message;
      });
  }

  loadStudents();
}

No need to change it to $resource. It will work just fine. — Alberto I.N.J.
– Alberto I.N.J., Commented Jul 1, 2015 at 7:07
see the basic example of credit card resource. You will get to know how it will work. docs.angularjs.org/api/ngResource/service/$resource — Vineet
– Vineet, Commented Jul 1, 2015 at 7:10
your statement "I am using REST API so for that I have to use $resource." is based on a false assumption. — Claies
– Claies, Commented Jul 1, 2015 at 7:20
I actually wanted to say that I want to use $resource with REST API — Aashima Vinayak
– Aashima Vinayak, Commented Jul 1, 2015 at 7:27

Onyooo · Accepted Answer · 2016-05-04 12:24:48Z

$resource lets you create a resource object that will eventually let you interact with the RESTful server side data-sources.

The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.

To use $resource for the rest service, first you will need to include the ng-resource library in your page.

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-resource.js"></script>

Then in the js file, dependency inject ng-resource in your angular module.

var userApp = angular.module("userApp", ['ngResource','ngRoute']);

Once this is done, you can play with $resource,

Now you can make rest calls using $resource instead $http like this:

var myApp = angular.module('student', ['ngResource','ngRoute']);

function StudentController($scope, $resource){
var loadStudents = function(){
$scope.students = [];

//$query() is a "GET" method that expects an JSON arry inreturn
var getStuResObj=$resource("/students.json");// Creating Resource obj;
getStuResObj.$query().$promise.then(function(successResponse){
                                   $scope.students = response.students;
                              },function(errorResponse){
                              $scope.error_message = response.error_message;
                        });
  .
  .
  .
  .
  .
  .

 //$save() is a "POST" method
 var createStuResObj=$resource("/students.json");
createStuResObj.$save($scope.student).$promise.then(function(successResponse){

                                  $scope.students.push(response.student);
                                  $scope.enterNew = false;
                                  $scope.editing = false
                           },function(errorResponse){
                              function(response, status, headers, config){
                              $scope.error_message = response.error_message;
                        });
  .
  .
  .
  .
  .
  .

   //$delete() is a "DELETE" method
 var deleteStuResObj=$resource("/students/' + student.id + '.json");
deleteStuResObj.$delete().$promise.then(function(successResponse){
                            var index = $scope.students.indexOf(student);
                            $scope.students.splice(index,1);
                           },function(errorResponse){
                              function(response, status, headers, config){
                              $scope.error_message = response.error_message;
                        });

The code above is how you convert $http calls to $resource calls

For further reading about this concept check the Official AngularJs site

Collectives™ on Stack Overflow

How do I convert $http.post response to $resource in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related