Angularjs using Spring MVC RESTful Web service

Question

I am new to angularjs and resently began to try consuming RESTful web services with angularjs. In my Spring MVC application I have a controller:

@Controller
@RequestMapping(value = "/exam/{examName}")
public class SomeController {

    @Autowired
    private QuestionService questionService;

    @RequestMapping(value = "/{examId}", produces = "application/json; charset=UTF-8")
    @ResponseBody
    public String getExam(@PathVariable int examId) {

        List<Question> questions = questionService.find(Question.class, "examId", examId);

        return JSONUtil.convertObjectToJSON(questions); //A json array is returned
    }

}

This controller returnes following JSON array:

[
    {
        "id": 1,
        "examId": 2,
        "text": "1. Eyniköklü sözlər cərgəsini müəyyənləşdirin.\r\n"
    },
    {
        "id": 2,
        "examId": 2,
        "text": "2. Sait səslərə aid düzgün fikiriəri seçin.\r\n\n\n\n\n\n1. Hava axını ağız boşluğunda heç bir maneəyə rast gəlmir.\r\n"
    },
    {
        "id": 3,
        "examId": 2,
        "text": "3. Asılı tərəfi əsl Azərbaycan sözü ilə ifadə olunmuş söz birləşmələrini göstərin.\r\n"
    },
    {
        "id": 4,
        "examId": 2,
        "text": "4. \"Amma sən lap ağ elədin ha\" cümləsində köməkçi nitq hissələrini ardıcıllıqla göstərin.\r\n"
    },
    {
        "id": 5,
        "examId": 2,
        "text": "5. Hansı söz birləşməsinin asılı tərəfi aşağıdakı sxemə uyğundur?\r\n"
    }
]

And here is my html file, that consumes this web service with angularjs:

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-controller="customersController"> 
  <div ng-repeat="x in names">
    {{ x.text }} <br>
  </div>
</div>

<script>
function customersController($scope,$http) {
  $http.get("http://localhost:8086/QuizNoqteAz/exam/abituriyent/2")
  .success(function(response) {$scope.names = response;});
}
</script>

</body>
</html>

The web service works correctly, I have tested it with Postman Rest Client. Angular js isn't working. The html file produces a blank page and nothing is shown.

Any help is highly appreciated.

Have you tried defining a module to store the controller in? — simeg
– simeg, Commented Dec 21, 2014 at 23:56
I am new to angularjs and didn't use modules yet. The method that I use here is described in w3schools: w3schools.com/angular/tryit.asp?filename=try_ng_customers_json And I just don't get why my json is not parsed by angularjs. — gdrt
– gdrt, Commented Dec 22, 2014 at 0:03
You could try doing a console.log(response) inside the $http.get to see what's actually being returned. — simeg
– simeg, Commented Dec 22, 2014 at 0:09
XMLHttpRequest cannot load localhost:8086/QuizNoqteAz/exam/abituriyent/2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. — gdrt
– gdrt, Commented Dec 22, 2014 at 0:36
You have to enable CORS (Cross Origin Requests) on your Spring MVC. Here's a guide: spring.io/guides/gs/rest-service-cors — simeg
– simeg, Commented Dec 22, 2014 at 7:48

simeg · Accepted Answer · 2014-12-23 09:43:07Z

2

To see what's wrong you can output the response to the console by using console.log(response) and look in the browser's console. This will tell you what is being returned from the server.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

is because of CORS is not enabled for the server. This guide will tell you how to do it.

answered Dec 23, 2014 at 9:43

simeg

1,8792 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs using Spring MVC RESTful Web service

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related