Post API doesn't give any react

Question

I am developing an application with using JHipster(Java,Spring Boot,Angular). I have course and student entities. Students should register courses with clicking register button after they logged in. I wrote post api and tested it from swagger. IT WORKS FINE. But when i try to link it to a button with angular1; it gives any react.

My Post API(I test it from swagger it works fine)

@PostMapping("/registercourse/{studentId}/{courseId}")
@Timed
public ResponseEntity<Void> registerCourse(@PathVariable Long studentId,@PathVariable Long courseId) {
    log.debug("REST request to register {} Course : {} Student : {}", courseId,studentId);
    courseRepository.registerCourse(studentId,courseId);
    return ResponseEntity.ok().headers(HeaderUtil.createEntityCreationAlert(ENTITY_NAME, courseId.toString())).build();
}

course.register.states.js

(function() {
    'use strict';
angular
    .module('mucsApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider
        .state('course.register', {
            parent: 'entity',
            url: '/registercourse/:studentid/:courseid',
            data: {
                authorities: ['ROLE_USER']
            },
            controller: function($scope, $stateParams) {
                $scope.studentid = $stateParams.studentid;
                $scope.courseid = $stateParams.courseid;
                $http({
                    method: 'POST',
                    url: 'http://localhost:8080/' + $scope.studentid + '/' + $scope.courseid,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function successCallback(response) {
                    console.log("GREAT");
                }, function errorCallback(response) {
                    console.log(response)
                });
            }
        });
}})();

course.register.service.js

(function() {
    'use strict';
    angular
        .module('mucsApp')
        .factory('CourseRegister', CourseRegister);

CourseRegister.$inject = ['$resource'];

function CourseRegister ($resource) {
    var resourceUrl =  'api/registercourse/:studentid/:courseid';

    return $resource(resourceUrl, {}, {
        'query': { method: 'POST', isArray: true},
        'save': {
            method: 'POST',
            transformRequest: function (data) {
                var copy = angular.copy(data);
                return angular.toJson(copy);
            }
        }
    });
}})();

My html button:

<button type="submit"
        ui-sref="course.register({studentid:vm.mystudentid , courseid:course.id})"
        class="btn btn-info btn-sm">
    <span class="glyphicon glyphicon-eye-open"></span>
    <span class="hidden-sm-down">Kaydol</span>
</button>

Answer 1

Your Spring controller is looking for this:

@PostMapping("/registercourse/{studentId}/{courseId}")

Your $http call is posting to this:

url: 'http://localhost:8080/' + $scope.studentid + '/' + $scope.courseid

You need to change your call to:

url: 'http://localhost:8080/registercourse' + $scope.studentid + '/' + $scope.courseid

Also, your Controller is not actually using your CourseRegister. you need to inject that in your AngularJS controller if you want to use it.: controller: function($scope, $stateParams,CourseRegister).

My two cents is that in your case, you are better of just using $http. I would put the [updated] $http call into your CourseRegister service, and use that. $resource would require more modifications than I think is worth it.

More on $resource is here.