Question

我有以下代码作为Spring Controller：

@RequestMapping(value = "/city/{city}")
    public ModelAndView cityRestaurants(@PathVariable String city){
    ModelAndView mav = new ModelAndView();
    mav.setViewName("restaurant");
    List<Restaurant> list = null;
    try {
        list = rService.getRestaurantsFromCity(city);
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    mav.addObject("list", list);

    return mav;
    }

如何使用AngularJS访问客户端的“列表”？

Answer 1

可以定义一个没有视图但将返回参数呈现为JSON的控制器。为了使其工作，Jersey库需要在类路径上：

@Responsebody
@RequestMapping(method=RequestMethod.GET, value = "/city/{city}", produces = "application/json" )
public List<Restaurant> cityRestaurants(@PathVariable String city){
        return rService.getRestaurantsFromCity(city);
 }

您已经可以使用类似Postman的内容测试此服务并查看它是否正常工作，然后在客户端，我们可以使用Ajax请求调用此服务：

 $http({
        method: 'GET',
        url: 'https://www.example.com/city/yourcityId',
     }).success(function(data){
        alert('restaurants: ' + data);
    }).error(function(){
        alert("error");
    });

这应该打印城市的餐馆。

Answer 2

正如@jhadesdev所建议的，而不是使用模型和视图方法，您可以使用Restful Web服务，该服务将数据以JSON格式返回到角度js控制器。在那里，您可以根据需要更改$ scope变量，具体取决于结果。有关详细教程，您可以访问spring网站。

1 Building a RESTful Web Service

2 Consuming a RESTful Web Service with AngularJS

Answer 3

AngularJs的常用方法是使用REST API从服务器加载数据。如果数据以JSon格式返回，它会被AngularJs自动识别为Javascript对象，并且可以直接添加到视图中。

以下是使用RESTAngular的简单示例：

var app = angular.module('MyApp', ['restangular'])

.config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl('my.api/rest/');
});

app.controller('MyCtrl', function($scope, Restangular) {
    $scope.city = 'Chicago';
    $scope.restaurants = [{name:'Restaurant 1'}, {name:'Restaurant 2'}];

    // Defines a resource located at "my.api/rest/restaurants/Chicago"
    var source = Restangular.all('restaurants').one($scope.city);

    source.getList().then(function(result) {
        $scope.restaurants = result;
    });
});

配置Spring MVC以生成JSon数据相当容易。我不足以指导你，但你会发现很多信息。

使用AngularJS访问DOM对象

3 个答案: