如何使用AngularJS与SpringMVC异步加载数据？

我是AngularJS的新手，并且不知道如何处理以下情况的最佳方法：

1.我需要显示过去30天的数据行。 （默认选项）

我是怎么做的：当页面加载时，Spring控制器将列表放在模型属性中。

@RequestMapping(value="/show/data", method = RequestMethod.GET) public String getDataPage(ModelMap model) { //cropped for brevity List dataList = dataService.getData(fromDate, toDate); model.addAttribute("dataList ", dataList ); return "data-page"; } 

在JSP中我使用EL标记循环遍历List并以表格forms向用户显示数据

   ${currentData.name} ${currentData.address} ${currentData.email} ${currentData.phone}   

1. 用户可以选择日期范围并根据所选范围（例如今天，昨天，上周，上个月，自定义范围），显示的数据应更新。

我是怎么做的：我正在使用Bootstrap-Daterangepicker（ https://github.com/dangrossman/bootstrap-daterangepicker ）来显示标记。 它为我提供了一个回调函数。

 $('#reportrange').daterangepicker(options, callback); 

例如$('#reportrange').daterangepicker(options, function(startDate, endDate){});

没有AngularJS，这将是混乱的。 我可以调用jQuery ajax然后获取一个列表，然后在jQuery中搞乱DOM元素。 但这很麻烦。

如何在此场景中包含AngularJS以使我的生活更轻松。 （而且代码不那么干净了）请帮忙。 我被卡住了。

Answer 1

您必须使用Angular $ http服务 。 为了更好的抽象，你应该使用$ resource服务 。

 var mod = angular.module('my-app', ['ngResource']); function Controller($scope, $resource) { var User = $resource('http://serveraddress/users?from=:from&to=:to', null, { getAll: {method: 'JSONP', isArray: true} }); $scope.changeDate = function(fromDate, toDate) { $scope.users = User.getAll({from: fromDate, to: toDate}); }; $scope.users = User.getAll(); } 

  
  
 
 
{{user.name}}
 
{{user.address}}
 
 
 
  

为了适应DateSelector，您希望创建一个指令来封装其要求。 最简单的是：

 mod.directive('myDatePicker', function () { return { restrict: 'A', link: function (scope, element, attr) { $(element).daterangepicker({}, function (startDate, endDate) { scope.$eval(attr.myDatePicker, {$startDate: startDate, $endDate: endDate}); }); } }; }); 

无需担心同步。 由于$ resource基于promises ，因此在数据准备就绪时它将自动绑定。

Answer 2

你应该做这样的事情：

SpringMVC控制器：

 @RequestMapping(value="/load/{page}", method = RequestMethod.POST) public @ResponseBody String getCars(@PathVariable int page){ //remember that toString() has been overridden return cars.getSubList(page*NUM_CARS, (page+1)*NUM_CARS).toString(); } 

AngularJS控制器：

 function carsCtrl($scope, $http){ //when the user enters in the site the 3 cars are loaded through SpringMVC //by default AngularJS cars is empty $scope.cars = []; //that is the way for bindding 'click' event to a AngularJS function //javascript cannot know the context, so we give it as a parameter $scope.load = function(context){ //Asynchronous request, if you know jQuery, this one works like $.ajax $http({ url: context+'/load/'+page, method: "POST", headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function (data, status, headers, config) { //data contains the model which is send it by the Spring controller in JSON format //$scope.cars.push is the way to add new cars into $scope.cars array for(i=0; i< data.carList.length; i++) $scope.cars.push(data.carList[i]); page++; //updating the page page%=5; //our bean contains 15 cars, 3 cars par page = 5 pages, so page 5=0 }).error(function (data, status, headers, config) { alert(status); }); } } 

视图

            
   
  
{{car.name}}
 
 
 
    3 more... 
   

完整的例子就在这里