Fatal编程技术网
  • java/
  • Angularjs调用java函数

Angularjs调用java函数

java javascript angularjs mongodb

Angularjs调用java函数,java,javascript,angularjs,mongodb,Java,Javascript,Angularjs,Mongodb,我有一个简单的JAVA和angularjs web应用程序。用户可以在其中向应用程序添加人员，并将其从mongo数据库中删除 我的问题是，我不知道angular是如何与java通信和调用java函数的。例如，如果我想在单击按钮后从数据库中删除一个人 这里有一些代码 persons.html <a for-authenticated ng-click="remove(s.id)" href=""> <i class="pull-right glyphicon glyph

我有一个简单的JAVA和angularjs web应用程序。用户可以在其中向应用程序添加人员，并将其从mongo数据库中删除

我的问题是，我不知道angular是如何与java通信和调用java函数的。例如，如果我想在单击按钮后从数据库中删除一个人

这里有一些代码

persons.html

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

<html ng-app="personApp">
   <body ng-controller=""personCtr>
      <input type="submit" ng-click="getPersons()"/>
      <input type="submit" ng-click="deletePerson(somePersonIdFromTableOrSomething)"
   </body>
</html>
PersonService.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;
    }) : {};
};
}

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

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

(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
            })
        }
    })
})();
PersonResource.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;
    }) : {};
};
}

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

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

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

我还有一个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);
     }
   }
getTemplate（）返回MongoTemplate

有人能告诉我从数据库中删除条目的错误吗？

您需要单独解决这些问题。尝试单独测试您的rest服务。使用POSTMAN或任何其他REST客户机（）并测试服务是否相应地运行。只有在成功时，才检查Javascript客户端（AngularJS代码），看看请求（头、参数和正文）是否与REST客户端生成的请求相同。

因此，当使用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);
    }
}
Html

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

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



您可以通过以下方式调用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:");
        });
    };
}]);



RESTful Web服务用于与Java后端对话。您应该研究它（JAX-RS是JavaAPI的名称）并熟悉它。但是你忘了说你的问题是什么。你有错误吗？如果是这样的话，那是什么呢？对于那个代码，我有一个错误：SpeakerResource.deleteObject不是一个函数。所以是一个Javascript错误。但是，您没有发布SpeakerResourceJavaScript代码。在这一点上，我必须假设浏览器没有说谎，并且函数根本不存在。sry编辑了这一点。我现在觉得自己很笨，但是我怎么可能实现那个函数来告诉java删除那个人呢？我建议在这里查看文档，以获取Angular$resource:。还有关于如何创建自定义方法的文档，以防您需要实现自定义方法。@SiddhartRathi-关于我的问题的任何帮助，有点类似于您回答的任何帮助