Question

我想将$ http.post响应转换为$ resource。我正在使用REST API，所以我必须使用$ resource。我的代码正在使用$ http，任何想法如何用$ resource实现这一点？这是代码.. 感谢

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

Answer 1

$ resource 可让您创建资源对象，最终让您与 RESTful 服务器端数据源进行交互。

返回的资源对象具有提供高级别行为的操作方法，而无需与低级$ http 服务进行交互。

要将 $ resource 用于其他服务，首先您需要在页面中加入 ng-resource 库。

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

然后在js文件中，依赖注入ng-resource 在角度模块中。

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

完成后，您可以使用$ resource，

现在，您可以使用 $ resource 而非 $ http 进行休息通话，如下所示：

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

以上代码是您将 $ http calls 转换为 $ resource calls

的方法

有关此概念的进一步阅读，请查看Official AngularJs site

如何将$ http.post响应转换为angularjs中的$ resource？

1 个答案: