java - 当来自 JSP 时，如何理解 Angular 中的服务器/客户端数据传输？

Question

我对如何使用 java 和 jsp 以及表达式语言和 JSTL 创建 Web 应用程序有很好的基础知识。我正在尝试学习如何在前端使用 Angular.js。

我已经学习了几个教程，并且开始掌握基础知识。但我还没有弄清楚如何将数据从服务器传输到前端。我发现的大多数教程都描述了如何从前端将数据发送到服务器。

我知道 Angular Web 应用程序建议使用 RESTful API 后端。不幸的是，我没有这方面的经验，而且我发现很难同时学习 Angular 和 RESTful。如果可能的话，我很乐意做出解决方案，以便我可以使用现有的服务器解决方案，并一次学习一个元素。

服务器端设置

现在，在我的旧设置中，使用 javax.servlet.http.HttpServlet，我调用 service(HttpServletRequest, HttpServletResponse) 方法。在方法内部，我向请求添加属性，如下所示:

request.setAttribute("attribute1", "1");
request.setAttribute("attribute2", "2");
request.setAttribute("attribute3", "3");

然后，由于前端 Controller 模式，我将这些请求变量传递到重定向，如下所示:

request.getRequestDispatcher("/WEB-INF/" + myPageVar + ".jsp").
forward(request, response);

目前，我希望保留此服务器端设置。

当前客户端数据访问:

在当前设置中，我现在可以通过两种不同的方式访问启动的变量。要么在 JavaScript 脚本中，如下所示(不适用于对象，仅适用于更简单的属性，如字符串(包括 JSON))。接下来的代码行是从 servlet 重定向到的 jsp 页面中选取的。

var attribute1 = ${requestScope.attribute1};

或者在 html 中，像这样(适用于对象):

<c:set var="attribute1" value="${requestScope.attribute1}"></c:set>

我想我可以合并表达式语言，并使用 javascript 变量来初始化我的 Angular 模块、指令和 Controller 中的变量，但我更愿意纯粹在 Angular 中进行。

是否可以使用 Angular 以任何方式访问这些属性？我一直在尝试阅读 $http 和 $scope，但是有大量与这些不相关的信息，我还无法浏览这些信息。

Answer 1

如果您想要让 Angular 访问的数据在用户登陆页面时应该准备好，那么按照您的建议将数据放入 jsp 页面中的 javascript 变量中可能是有意义的。 由于您的 var 在全局范围内，因此您可以像这样进入 Angular Controller :

$scope.att1 = attribute1;

但是，如果您想更新数据而不重新渲染整个页面(这就是您很快想要的)，您应该使用 $http 来调用返回 json 的 servlet。您可以相对简单地通过重写 httpServlet 中的 doGet 并使用轻量级 json 库(如 gson)来制作没有 jax-rs 的 servlet。这个例子就可以做到这一点:

//Set up pojo and make it into json string:
SomeClass pojo =new SomeClass();
pojo.setX("this is X");
JSONObject jsonObject = new Gson().toJson(pojo);
String jsonStr=jsonObject.toJSONString();
//Modify response and write json string
httpServletResponse.setStatus(200);//We are ok
httpServletResponse.setContentType("application/json");
httpServletResponse.setCharacterEncoding("UTF-8");
Writer writer = httpServletResponse.getWriter();
writer.write(jsonStr);
writer.close();
//Thats it

在一个简单的设置中，您可以像这样在 Controller 中处理此响应:

$http({method: 'GET', url: 'http://yourservleturl' })
.success(function(jsonStringFromServlet){
  $scope.newData = jsonStringFromServlet;
})
.error(function(){
  $scope.error = true;
});

在 page-html 中，您可以使用以下方式访问数据

<div>This is your new x: {{newData.x}}</div>