Angularjs调用java函数

Question

我有一个简单的 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' }
    })

});

我还有一个 java 类，我想从数据库中删除这个人

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。

谁能告诉我我做错了什么从数据库中删除我的条目？

Answer 1

所以当我们通常使用 GET 方法时，我们会获取一些数据，如果我们想向服务器发送一些数据（例如要删除的人的 id）我们使用 POST 方法或 DELETE 方法，在我的示例中我将使用 POST简化的方法。 Angular 和 java 通过 RESTFUL 服务 (JAX-RS) 进行通信，您不能在 Angular js 中调用 java 函数，反之亦然。我将展示获取数据和发送数据的简单示例（获取所有人员，删除具有给定 ID 的人员）。

这是一个你可以开始学习的例子：

Java 人物控制器

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

Java 人员服务

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

Java 人员存储库

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 的控制器发送请求，在数据库中找到并删除它

Answer 2

您需要单独解决问题。尝试单独测试您的休息服务。使用 POSTMAN 或任何其他 REST 客户端 (https://addons.mozilla.org/en-US/firefox/addon/restclient/) 并测试服务是否有相应的行为。只有在成功后，检查 Javascript 客户端（AngularJS 代码）并查看请求（标头、参数和正文）是否与 REST 客户端生成的相同。

Answer 3

您可以通过这种方式在 angularjs 控制器中调用 java 方法或服务：

app.controller('personCtrl',['$scope', '$http', function($scope, $http){
    $scope.firstName = "John";
    $scope.personList = [];
    $scope.typelistload = function() {
        $http.get(
            'http://localhost:8080/SpringMVCHibernate/Person/getPersonList'
        ).success(function(data) {
            $scope.personList = data;
        }).error(function() {
            ngToast.danger( "Some problem in Listing:");
        });
    };
}]);