current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

I have one simple web application in JAVA and angularjs. Where users can add persons to app and remove them from mongo database.

My problem is, I don't know exactly how angular communicates with java and calls Java functions. For example if i want to delete a person from my database after a button click.

here's some code

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

});

also i have a java class where i want to delete this person from database

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

the getTemplate() returns MongoTemplate.

Can anyone tell me what i am doing wrong to get my entry deleted from database ?

share|improve this question
1  
Well RESTful webservices are used to talk to the Java backend. You should study that (JAX-RS is the name of the Java API) and get familiar with it. But you forgot to actually mention what your problem is. You get an error? If so, what is it? – Gimby Apr 24 '14 at 15:44
    
with that code i have an error Error: SpeakerResource.deleteObject is not a function. – user3144600 Apr 24 '14 at 15:54
    
So a Javascript error. You didn't post the SpeakerResource javascript code though. At this point I have to assume the browser is not lying and the function simply does not exist. – Gimby Apr 24 '14 at 15:56
    
sry edited that. i feel dumb now, but how i could possibly implement that function to tell java to delete that person? – user3144600 Apr 24 '14 at 16:08
    
I would suggest to look at the docs for Angular $resource here: docs.angularjs.org/api/ngResource/service/$resource. There is also the doc on how to create a custom method, in case you need to implement one. – klode Apr 24 '14 at 17:25
up vote 1 down vote

So when using GET method usual we fetch some data, if we want to send some data to server (ex. an id for person to be deleted) we use POST method or DELETE method, in my example I'll use POST method for simplification. Angular and java communicate thru RESTFUL services (JAX-RS), You cant call java function in angular js or vice verse. I'll show simple example of fetching data and sending data (fetch all persons, delete person with given id).

Here is an example where You can start learning from:

Java Person Controller

@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 Person Service

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 Person Repository

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>

Hope it will help, not tested but generally that is the flow..send request to controller with person id, find it in database and delete it

share|improve this answer
up vote 0 down vote

You need to attack the issues individually. Try testing your rest service alone. Use POSTMAN or any other REST Client (https://addons.mozilla.org/en-US/firefox/addon/restclient/) and test if the service is behaving accordingly. Only when that's successful, check on the Javascript client (AngularJS code) and see if the request (headers, params and body) is the same as the one generated by the REST client.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.