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

时间:2022-01-07 13:09:51

I am new to Angular JS, I have created a Spring MVC web application with Angular JS, I know that from view we can call REST services from Angular JS using resource, restangular, http , But say in Spring form the Controller a view is been triggered and for loading the datas through angular within the view again a REST call from angular is been called from view to the server and gets the datas thereafter for loading, Instead is there any way to pass the json object while triggering the view from Spring controller to the Angular JS at the first time itself.

我是Angular JS的新手,我用Angular JS创建了一个Spring MVC Web应用程序,我知道从视图中我们可以使用资源,restangular,http从Angular JS调用REST服务,但是在Spring形式中可以说Controller是一个视图触发并通过视图中的角度加载数据再次从视图到服务器调用来自angular的REST调用,然后获取数据以进行加载,而不是有任何方法在从Spring控制器触发视图时传递json对象第一次到Angular JS。

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

I have done a similar thing, its working fine but don't know whether its a good approach or not.

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

Spring controller

弹簧控制器

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

employee.jsp

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>

3 个解决方案

#1


5  

Angular really shines when you use it in a "single" page application, so I would suggest using it as you suggested in your "existing approach" as it moves you closer to a single page app design, however, if you are just trying to get some of the features of Angular in an existing request/response application, then you could send your html payload with the data in ng-init as this page demonstrates. It's a RoR example, but I think the point is clear. I think it is a bit of hack, but should get the job done.

当你在“单一”页面应用程序中使用它时,Angular会非常闪耀,因此我建议你按照“现有方法”中的建议使用它,因为它会使你更接近单页应用程序设计,但是,如果你只是想尝试在现有的请求/响应应用程序中获取Angular的一些功能,然后您可以使用ng-init中的数据发送您的html有效负载,如此页面所示。这是一个RoR的例子,但我认为这一点很清楚。我认为这有点黑客,但应该完成工作。

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

#2


2  

I recently switched to using angular, the beauty of it is you can ditch jsp's entirely and just have static html as the frontend. Served as a static resource by spring.

我最近切换到使用angular,它的美妙之处在于你可以完全抛弃jsp,并且只需要静态html作为前端。春天作为静态资源。

To initially populate your form/tables/whatever - lots of different options do it in javascript/angular. But its nice to keep your view seperate from your controllers (ie don't use jsp's).

最初填充表单/表格/任何东西 - 许多不同的选项以javascript / angular进行填充。但很高兴你的视图与你的控制器分开(即不要使用jsp)。

#3


0  

You can use below code for get user logging,

您可以使用以下代码获取用户日志记录,

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

#1


5  

Angular really shines when you use it in a "single" page application, so I would suggest using it as you suggested in your "existing approach" as it moves you closer to a single page app design, however, if you are just trying to get some of the features of Angular in an existing request/response application, then you could send your html payload with the data in ng-init as this page demonstrates. It's a RoR example, but I think the point is clear. I think it is a bit of hack, but should get the job done.

当你在“单一”页面应用程序中使用它时,Angular会非常闪耀,因此我建议你按照“现有方法”中的建议使用它,因为它会使你更接近单页应用程序设计,但是,如果你只是想尝试在现有的请求/响应应用程序中获取Angular的一些功能,然后您可以使用ng-init中的数据发送您的html有效负载,如此页面所示。这是一个RoR的例子,但我认为这一点很清楚。我认为这有点黑客,但应该完成工作。

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

#2


2  

I recently switched to using angular, the beauty of it is you can ditch jsp's entirely and just have static html as the frontend. Served as a static resource by spring.

我最近切换到使用angular,它的美妙之处在于你可以完全抛弃jsp,并且只需要静态html作为前端。春天作为静态资源。

To initially populate your form/tables/whatever - lots of different options do it in javascript/angular. But its nice to keep your view seperate from your controllers (ie don't use jsp's).

最初填充表单/表格/任何东西 - 许多不同的选项以javascript / angular进行填充。但很高兴你的视图与你的控制器分开(即不要使用jsp)。

#3


0  

You can use below code for get user logging,

您可以使用以下代码获取用户日志记录,

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