Pages Navigation Menu

Coding is much easier than you think

AngularJS Interacting with Java Servlet using JSON


 
In this post, I am going to demonstrate a simple example on how to make AJAX calls from a JSP page to a Servlet using AngularJS and update the same JSP page back with the JSON response from the Servlet. In other words, this post will give you an overview on how to integrate AngularJS in a Java web applications.
 
There are many JSON libraries available that can be used to pass AJAX updates between the server and the client. I am going to use google’s gson library in this example.
 
Below are the steps to reproduce to create a simple AngularJS enabled Java Web Application using Eclipse and Tomcat 7,
 

How to use?

 
First of all create a “Dynamic Web Project” in Eclipse and download the AngularJS library and place in js folder of eclipse work-space, and refer this files in the head section in the jsp, this file is responsible for the AJAX call made to the servlet and for updating the response back in the JSP.
 

Jsp Page

 






AJAX with Servlets using AngularJS




First Name : {{person.firstName}}

Last Name : {{person.lastName}}

 

HTML – Data Binding

 
We can display JSON data values in jsp by using their attributes in expressions like {{person.firstName}}, {{person.lastName}} etc.. Here the id=”ng-app” is most important for Internet Explorer browser data binding.
 
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.

ng-click
Angular on click event
 

Model class

 

package com.model;

public class PersonData {

	private String firstName;
	private String lastName;

	public String getFirstName() {
		return firstName;
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public String getLastName() {
		return lastName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

}

 
Recommended Reading:

 

Servlet

 
Now let’s go on and write the servlet which handles this Ajax call

package com.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.model.PersonData;

public class AngularJsServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public AngularJsServlet() {
		super();
	}

	protected void doGet(HttpServletRequest request,
	    HttpServletResponse response) throws ServletException, IOException {
		PersonData personData = new PersonData();
		personData.setFirstName("Mohaideen");
		personData.setLastName("Jamil");

		String json = new Gson().toJson(personData);
		response.setContentType("application/json");
		response.getWriter().write(json);
	}
}

 

Code Explanation

 
When the user clicks on “Fetch data from server” button, button click event is fired via angularJS “ng-click” directive and the ‘http’ function executes the Ajax GET request on the Servlet.
 

Web.xml

 
Make sure you have done servlet mapping in web.xml as shown below


  
    index.jsp
  
  
    javaAngularJS
    com.controller.AngularJsServlet
  
  
    javaAngularJS
    /javaAngularJS
  

 

Demo

 
Once you done with above steps then Right click on project –> Run As –> Run on Server
(Note: I have used tomcat server to run this application. If you are not sure how to configure tomcat server in eclipse please follow this link).
 

 
Click button: Fetch data from server to pass HTTP request using angularJS where Java servlet will return data as below:

AngularJS demo

download
 

Reference

 
AngularJS API Docs

6 Comments

  1. Hi,

    I have problem in this code, when i take data from responce it give me whole content of specified page. i want only JSON. please help me.

    Thanks,
    Harshad

    • Rather than writing Success and Error function after ‘ $http({
      method : ‘GET’,
      url : ‘javaAngularJS’
      }). ‘

      You can go with ” .then(function(response){
      $scope.person = response.data;
      }); “

  2. what about catching any error encountered while running servlet in angularjs ???

  3. Nice Example.

  4. Very good article. it is very useful for me thank u

  5. am not sure what went wrong with syntax at script , i modified it to separate mainaapp, and controller worked fine . If not i can see data binding coursers with attributes ….

    AJAX with Servlets using AngularJS

    Fetch data from server
    First Name : {{person.firstName}}
    Last Name : {{person.lastName}}

    //myapp.js
    var myApp = angular.module(‘myApp’, []);

    //mycontroller.js
    myApp.controller(‘MyController’,function($scope, $http) {

    $scope.getDataFromServer = function() {
    $http({
    method : ‘GET’,
    url : ‘javaAngularJS’
    }).success(function(data, status, headers, config) {
    $scope.person = data;
    }).error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    });

    };
    });