将Angular JS与JSP和Servelet集成

Question

I am new to Angular Js and I am trying to integrate Angular JS with JSP & Servelet. 我是Angular Js的新手，我正在尝试将Angular JS与JSP和Servelet集成。 I want to write a Simple Code which is Just Retrieving the Data from Action Class and Displaying in Index.jsp Page. 我想编写一个简单的代码，该代码只是从Action类中检索数据并显示在Index.jsp页面中。 This is my Code:- 这是我的代码：

Index.jsp - 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) - PersonData.Java（模型类）-

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)- AngulaJsServelet.Java（动作类）-

     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 - 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. 谢谢。

Answer 1

The error is pretty clear. 错误非常明显。 You are getting a 404 because that page is missing. 您收到404，因为该页面丢失。 You should check your URL. 您应该检查您的URL。 It should be in this form: 应采用以下形式：

protocol://host:port/appName/page 协议：//主机：端口/ APPNAME /页

But you are clearly missing the appName. 但是您显然缺少了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: 假设您的web.xml中的显示名称与您的项目名称相同，那么您应该能够像这样修复它：

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

将Angular JS与JSP和Servelet集成

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-10-01 07:32:42

将Angular JS与JSP和Servelet集成

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-10-01 07:32:42

解决方案1
2 已采纳 2015-10-01 07:32:42