Kahfi Maulana
Kahfi Maulana

Reputation: 25

Spring MVC and AngularJS @RequestMapping

I have built an application with Spring-boot and AngularJS with the REST End Point application. I got a little stuck with @RequesMapping in Spring Controller I've made. The problem is, I have the example url:

"localhost:8080/foo/bar/api/cardGenerated/0102". 

'01' is first parameter and '02' is second parameter. How can I mapped into @RequestMapping Spring controller to get a url above.

Here's my controller :

@RestController
@RequestMapping("/api")
public class CardGeneratedResource {
@RequestMapping(value = "/cardGenerated/{branchCode}{cardType}",
            method = RequestMethod.GET,
            produces = MediaType.APPLICATION_JSON_VALUE)
    @Timed
    public ResponseEntity<CardGenerated> get(@PathVariable("branchCode") String branchCode,
                                             @PathVariable("cardType") String cardType,
                                             HttpServletResponse response) {

        log.debug("REST request to get CardGenerated : " + branchCode + " and " + cardType);

        CardGenerated cardGenerated = cardGeneratedRepository.
                findTopByBranchCodeAndCardTypeOrderByCardNumberDesc(branchCode, cardType);

        if (cardGenerated == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }

        return new ResponseEntity<>(cardGenerated, HttpStatus.OK);
    }
}

so this is my AngularJS $resource:

'use strict';

angular.module('itmApp')
    .factory('CardGenerated', function ($resource) {
        return $resource('api/cardGenerated/:branchCode:cardType', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET',
                transformResponse: function (data) {
                    data = angular.fromJson(data);
                    return data;
                }
            }
        });
    });

I always got 'Failed to load resource: the server responded with a status of 404 (Not Found)'.

Upvotes: 2

Views: 3734

Answers (1)

Satyam Koyani
Satyam Koyani

Reputation: 4274

Here you are missing / .

You have two path variable here.so default url is

localhost:8080/foo/bar/api/cardGenerated/FIRST_PATH_VARIABLE/SECOND_PATH_VARIABLE
  1. branchCode (First path variabel)
  2. cardType (Second path variable)

    @RequestMapping(value = "/cardGenerated/{branchCode}/{cardType}"

And in frontend side too the same mistake while registering factory definition.

api/cardGenerated/:branchCode/:cardType'

All method is like

@RestController
@RequestMapping("/api")
public class CardGeneratedResource {
@RequestMapping(value = "/cardGenerated/{branchCode}/{cardType}",
            method = RequestMethod.GET,
            produces = MediaType.APPLICATION_JSON_VALUE)
    @Timed
    public ResponseEntity<CardGenerated> get(@PathVariable("branchCode") String branchCode,
                                             @PathVariable("cardType") String cardType,
                                             HttpServletResponse response) {

        log.debug("REST request to get CardGenerated : " + branchCode + " and " + cardType);

        CardGenerated cardGenerated = cardGeneratedRepository.
                findTopByBranchCodeAndCardTypeOrderByCardNumberDesc(branchCode, cardType);

        if (cardGenerated == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }

        return new ResponseEntity<>(cardGenerated, HttpStatus.OK);
    }
}

and angular factory is like

'use strict';

angular.module('itmApp')
    .factory('CardGenerated', function ($resource) {
        return $resource('api/cardGenerated/:branchCode/:cardType', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET',
                transformResponse: function (data) {
                    data = angular.fromJson(data);
                    return data;
                }
            }
        });
    });

NOTE: First try with any rest client or postman and make sure backend api is working properly also angular side check parameters are being passed correctly.

Upvotes: 3

Related Questions