CODEWITHSUNDEEP
javascriptjavaangularjsjspservlets
Nitin
Nitin

Reputation: 13

Integrating Angular JS with JSP & Servelet

I am new to Angular Js and I am trying to integrate Angular JS with JSP & Servelet. I want to write a Simple Code which is Just Retrieving the Data from Action Class and Displaying in Index.jsp Page. This is my Code:-

Index.jsp - 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Fetch Data</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope , $http ) {


  $scope.getDataFromServer = function() {
    alert("Check Function");
    $http({
        method : 'GET',
        url : '/AngularJsServlet'
}).success(function(data, status, headers, config) {
    alert('data----'+data);   
    $scope.person = data;
  }).error(function(data, status, headers, config) {
    alert("failure");
        // called asynchronously if an error occurs
        // or server returns response with an error status.
   });
   };
  });
</script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myCtrl">

 <button data-ng-click="getDataFromServer()">Fetch data from server
            </button>
             <p>First Name : {{person.firstName}}</p>
       <p>Last Name : {{person.lastName}}</p>
 </div>
  </body>
</html>

PersonData.Java (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;
 }

 }

AngulaJsServelet.Java (Action Class)-

     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 javax.servlet.annotation.WebServlet;


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);
    System.out.println("json---" + json);
    response.setContentType("application/json");
    response.getWriter().write(json);
}
}

web.xml -

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xmlns="http://java.sun.com/xml/ns/javaee"       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>Practice</display-name>
  <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

 <servlet>
<servlet-name>AngularJsServlet</servlet-name>
<servlet-class>com.controller.AngularJsServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AngularJsServlet</servlet-name>
<url-pattern>/AngularJsServlet</url-pattern>
</servlet-mapping>

</web-app>

Error -

 GET http://localhost:8080/AngularJsServlet 404 (Not Found)

Please Suggest me the way to solve this issue.

Thank you.

Upvotes: 1

Views: 2509

Answers (1)

Aurasphere
Aurasphere

Reputation: 4011

The error is pretty clear. You are getting a 404 because that page is missing. You should check your URL. It should be in this form:

protocol://host:port/appName/page

But you are clearly missing the appName. Assuming that the display name in your web.xml is the same as your project name you should be able to fix it like this:

GET http://localhost:8080/Practice/AngularJsServlet

Upvotes: 2

Related Questions