在初始视图调用中从 Angular JS 中的 Spring MVC 获取数据答案

【问题标题】：Getting data from Spring MVC in Angular JS in the initial view call在初始视图调用中从 Angular JS 中的 Spring MVC 获取数据
【发布时间】：2014-07-29 04:28:39
【问题描述】：

我是 Angular JS 的新手，我已经使用 Angular JS 创建了一个 Spring MVC Web 应用程序，我知道从视图中我们可以使用资源、restangular、http 从 Angular JS 调用 REST 服务，但是在 Spring 中说 Controller a视图被触发并再次通过视图中的角度加载数据从角度调用REST调用从视图到服务器并在此后获取数据以进行加载，而是有什么方法可以在触发视图时传递json对象从 Spring 控制器到 Angular JS 本身。

我做过类似的事情，它工作正常，但不知道它是否是一个好方法。

弹簧控制器

@RequestMapping("/getemployee")
public ModelAndView helloWord(){
   JSONArray employeeJsonArray = // contains all the information of the employee
   return new ModelAndView("employee", "employee",employeeJsonArray);
}

employee.jsp

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring 3.0 MVC Series: Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
    $scope.employee = [];
    $scope.loadData = function(employee)
    {
        $scope.employee = JSON.parse(employee);
    };
});
</script>
</head>
<body ng-controller="MyCtrl">
{{loadData('${employee}')}}

 <input type="text" ng-value="employee[0].name"/>
</body>
</html>

【问题讨论】：

您是在问是否可以像使用传统的请求/响应应用程序一样为页面提供 json 数据？
是的，但是数据需要通过初始视图调用本身从服务器传递
你可以使用ng-init，我会写一个简短的答案
好问题！我喜欢。以供将来参考。
但是，在上述情况下，可能会出现闪烁，内容会暂时显示。因此使用 ng-cloak 。 {{payCntrl.loadContactAddress('${contactAddress}')}} 使用 CSS : [ng\:cloak], [ng-cloak], .ng-cloak { display: none ！重要的; }

标签： javascript spring angularjs spring-mvc

【解决方案1】：

当您在“单页”应用程序中使用 Angular 时，它确实会大放异彩，因此我建议您按照您在“现有方法”中的建议使用它，因为它使您更接近单页应用程序设计，但是，如果您是只是试图在现有的请求/响应应用程序中获取 Angular 的一些功能，然后您可以发送带有 ng-init 中的数据的 html 有效负载，如 page 所示。这是一个 RoR 示例，但我认为重点很明确。我认为这有点 hack，但应该可以完成工作。

   <body ng-init="angularVariable = ${variableFromServer}">
     html/angular ...
   </body>

【讨论】：

在我的应用程序中我应该在哪里调用它
否则如果我们使用如图所示的现有方法，两次服务器调用是正确的，相反，如果我们可以在初始调用本身加载数据，我们可以防止两次调用正确跨度>
是的，进行了 2 个服务器调用。呈现页面的初始请求/响应以及数据的另外 1 个。这取决于你的最终目标。如果您尝试将功能添加到旧版应用程序，您可以使用 ng-init。如果您正在开发一个新应用程序，我建议您采用单页应用程序路线。
获取Error: [$parse:ueoe]这是我的代码<body ng-controller="MyCtrl" ng-init="employee = ${employee}">
我收到语法错误：令牌 '{' 是表达式第 13 列的意外令牌 [ on using this

【解决方案2】：

我最近改用 angular，它的美妙之处在于你可以完全抛弃 jsp，只使用静态 html 作为前端。由 spring 用作静态资源。

最初填充您的表单/表格/其他 - 许多不同的选项在 javascript/angular 中完成。但是将视图与控制器分开是很好的（即不要使用 jsp）。

【讨论】：

除了为服务调用根路径返回 contextPath 的东西之外，它们完全被抛弃了。如果有时我的 app.js 由 freemarker servlet 解释并将一些配置变量设置为 base: '${base}'

【解决方案3】：

您可以使用以下代码获取用户日志，

<input type="text" ng-model ="currentLoging" ng-init= "currentLoging='${pageContext.request.userPrincipal.name}'" />

【讨论】：