자바스크립트 - AngularJS에서 자바 함수 호출하기

저는 JAVA와 AngularJS로 만든 간단한 웹 애플리케이션 하나가 있습니다. 사용자는 앱에 사람을 추가하거나 Mongo 데이터베이스에서 제거할 수 있습니다.

제 문제는 Angular가 Java와 정확히 어떻게 통신하고 Java 함수를 호출하는지 모른다는 것입니다. 예를 들어 버튼 클릭 후에 데이터베이스에서 사람을 삭제하고 싶다면 어떻게 해야 하는지 모르겠습니다.

여기에 코드가 있습니다

persons.html

<a for-authenticated ng-click="remove(s.id)" href=""> <i
     class="pull-right glyphicon glyphicon-remove"></i>
</a>

app.js

var app = angular.module('conferenceApplication', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'angularFileUpload',
'ngQuickDate']);


 app.config(function ($routeProvider) {
    $routeProvider
      .when('/home', {
           templateUrl: '/partials/home.html',
           controller: 'HomeCtrl'
      })
      .when('/speakers', {
          templateUrl: '/partials/person-list.html',
          controller: 'PersonListCtrl'
      })
});
app.controller('PersonListCtrl', function ($scope,$http, $modal, $log, $route, PersonService) {
$scope.remove = function(id) {
    var deletedPerson = id ? PersonService.remove(id, function(resp){
        deletedPerson = resp;
    }) : {};
};
}

PersonService.js

app.service('PersonService', function ($log, $upload, PersonResource) {
this.getById = function (id, callback) {
    return PersonResource.get({personId: id}, callback);
};
this.remove = function(id, callback) {
    return PersonResource.deleteObject({PersonId: id}, callback);
}
}

PersonResource.js

app.factory('PersonResource', function ($resource) {
return $resource('rest/person/:personId',
    {
        personId: '@personId'
    },
    {
        'update': { method: 'PUT' }
    })

});

또한 저는 데이터베이스에서 이 사람을 삭제하고 싶은 자바 클래스가 있습니다

PersonResource.java

@Controller
 @RequestMapping("/person")
   public class PersonResource {

     @Autowired
     private PersonService personService;

     @RequestMapping(method = RequestMethod.GET, value = "/{id}")
     public ResponseEntity<Person> deleteObject(@RequestBody Person id) {
        Person person = personService.findById(id);
        personService.deleteObject(id);
        return new ResponseEntity<Person>(person, HttpStatus.ACCEPTED);
     }
   }

PersonRepository

  @Override
  public void deleteObject(String id) {
      getTemplate().remove(new Query(Criteria.where("id").is(id)), Person.class);
  }

getTemplate()는 MongoTemplate을 반환합니다.

누가 제 데이터베이스에서 항목이 삭제되는 이유를 제가 뭘 잘못하고 있는지 말해줄 수 있나요?

답변 #1

그래서 GET 메소드를 사용할 때 보통 데이터를 가져오고, 서버로 데이터를 보내고 싶다면(예: 삭제할 사람의 ID) POST 메소드나 DELETE 메소드를 사용합니다. 제 예제에서는 단순화를 위해 POST 메소드를 사용하겠습니다. Angular와 Java는 RESTFUL 서비스(JAX-RS)를 통해 통신합니다. AngularJS에서 Java 함수를 호출할 수 없고 반대로도 마찬가지입니다. 데이터를 가져오고 보내는 간단한 예제(모든 사람 가져오기, 주어진 ID로 사람 삭제)를 보여드리겠습니다.

다음은 당신이 학습을 시작할 수 있는 예제입니다:

자바 사람 컨트롤러

@Controller
@RequestMapping(value = "/person")
public class PersonController{

    private final PersonService personService;

    @Autowired
    public PersonController(final PersonService personService) {
        this.personService= personService;
    }

    @RequestMapping(value = "/", method = { RequestMethod.GET })
    @ResponseBody
    public List<Person> getPersons() {
        return personService.getPersons();
    }
    @RequestMapping(value = "/delete/{personId}", method = { RequestMethod.POST})
    @ResponseBody
    public HttpStatus deletePerson(@PathVariable final long personId) {
        return personService.deletePerson(personId);
    }
}

자바 사람 서비스

public class PersonService{

    private final PersonRepository personRepository;

    @Autowired
    public PersonService(final PersonRepository personRepository) {
       this.personRepository= personRepository;
    }

    public List<Person> getPersons() {
        return personRepository.findAll();;
    }

   public HttpStatus deletePerson(final long id) {
       if (id > 0) {
           personRepository.delete(id);
           return HttpStatus.OK;
       } else {
           return HttpStatus.INTERNAL_SERVER_ERROR;
       }
   }
}

자바 사람 저장소

public interface PersonRepository{
      public void delete(int personId);

      public List<Person> findAll();
}

Angular app.js

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

    app.controller('personCtrl',function($scope,$http){

        $scope.getPersons = function(){
            $http.get('person/').success(function(response){
                $scope.allPersons = response.data;
            }).error(function(){
               //handle error
            })
        };

        $scope.deletePerson = function(personId){
            $http.delete('person/'+personId).success(function(response){
                $scope.deleteResponseStatus = response.status;
            }).error(function(){
               //handle error
            })
        }
    })
})();

Html

<html ng-app="personApp">
   <body ng-controller=""personCtr>
      <input type="submit" ng-click="getPersons()"/>
      <input type="submit" ng-click="deletePerson(somePersonIdFromTableOrSomething)"
   </body>
</html>

도움이 되길 바랍니다. 테스트는 하지 않았지만 일반적으로 흐름은 이렇습니다.. 컨트롤러에 사람 ID로 요청을 보내고, 데이터베이스에서 찾아서 삭제합니다.

답변 #2

문제들을 개별적으로 다루어야 합니다. 먼저 REST 서비스를 단독으로 테스트해 보세요. POSTMAN이나 다른 REST 클라이언트(https://addons.mozilla.org/en-US/firefox/addon/restclient/)를 사용하여 서비스가 예상대로 동작하는지 테스트하세요. 이것이 성공한 후에만 Javascript 클라이언트(AngularJS 코드)를 확인하고 요청(headers, params, body)이 REST 클라이언트에서 생성된 것과 동일한지 확인하세요.