如何使用异步与AngularJS用SpringMVC加载数据？ [英] How to load data asynchronously using AngularJS with SpringMVC?

问题描述

我有新AngularJS和被套牢想知道接近下列情况下的最佳方式：

1 我需要显示的数据行的最后30天。 （默认选项）

我如何做：页面加载后，春节操控者将在模型的属性列表

  @RequestMapping（值=/显示/数据，方法= RequestMethod.GET）
    公共字符串getDataPage（ModelMap模型）{
        //裁剪为简洁
        清单＆lt;数据＆GT; DataList控件= dataService.getData（寄件者，TODATE）;
        model.addAttribute（DataList控件，DataList控件）;        返回数据页;
    }
 

和在JSP我使用EL标签遍历列表并显示用户的数据以表格形式

  c为C：VAR的forEach =CURRENTDATA项=$ {}的DataList＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT; $ {currentData.name}＆LT; / TD＆GT;
        ＆LT; TD＆GT; $ {currentData.address}＆LT; / TD＆GT;
        ＆LT; TD＆GT; $ {currentData.email}＆LT; / TD＆GT;
        ＆LT; TD＆GT; $ {currentData.phone}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; / C：的forEach＆GT;
 

1. 用户有一个选项可以选择日期范围和放大器;根据选择的范围（如今天，昨天，上周，上个月，自定义范围），显示的数据应该更新。

我如何做：我使用的是引导，Daterangepicker（ https://github.com/dangrossman/bootstrap-daterangepicker ）显示标记。这为我提供了一个回调函数。

  $（'＃reportrange'）daterangepicker（选项，回调）。
 

例如。 $（'＃reportrange'）daterangepicker（选项，函数（的startDate，结束日期）{}）;

如果没有AngularJS，这将是混乱的。
我可以打电话给jQuery的阿贾克斯再绕获取一个列表，然后乱用从内部的jQuery的DOM元素。但是，这是混乱的。

我怎么能包括在这种情况下AngularJS使我的生活更轻松。 （和code少了很多清洁）
请帮忙。我卡住了。

解决方案

您必须使用角 $ http服务。为了更好的抽象，你应该 $资源服务去了。

  VAR MOD = angular.module（'我的应用'，['ngResource']）;功能控制器（$范围，$资源）{
  VAR用户= $资源（的http：// serveraddress /用户=：从＆安培;为=：为，空，{
      GETALL：{方法：JSONP'，IsArray的：真正}
    }）;  $ scope.changeDate =功能（寄件者，TODATE）{
    $ scope.users = User.getAll（{来自：寄件者，于：TODATE}）;
  };  $ scope.users = User.getAll（）;
}
 

 ＆LT; HTML NG-应用程序=我的应用＆GT;
＆LT; D​​IV NG控制器=控制器＆GT;
  ＆LT;输入类型=文本我-日期选择器=CHANGEDATE（$的startDate，$结束日期）/＆GT;
  ＆LT;表＆gt;
    ＆LT; TR NG重复=用户用户＆GT;
      ＆LT; TD＆GT; {{user.name}}＆LT; / TD＆GT;
      ＆所述; TD＆GT; {{user.address}}＆下; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / HTML＆GT;
 

要容纳的DateSelector，你想创建一个指令来封装其要求。最简单的一个是：

  mod.directive（'myDatePicker'，函数（）{
    返回{
    限制：'A'，
        链接：功能（范围，元素，属性）{
            $（元素）.daterangepicker（{}功能（的startDate，结束日期）{
                。范围$的eval（attr.myDatePicker，{$开始日期：的startDate，$结束日期：结束日期}）;
            }）;
        }
    };
}）;
 

没有必要与同步担心。如$资源是基于承诺时，它将被自动地当数据准备好约束。

I've new to AngularJS and is stuck wondering about the best way to approach the following situation:

1. I need to show rows of data for the last 30 days. (default option)

How I'm doing it: When the page loads, the Spring controller puts the list in the model attribute.

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

        return "data-page";
    }

And in the JSP I'm using EL tags to loop through the List and show user the data in tabular form

<c:forEach var="currentData" items="${dataList}">
    <tr>
        <td>${currentData.name}</td>
        <td>${currentData.address}</td>
        <td>${currentData.email}</td>
        <td>${currentData.phone}</td>
    </tr>
</c:forEach>

1. The user has an option to select the date range & depending on the range selected(e.g. today, yesterday, last week, last month, custom range), the data shown should update.

How I'm doing it: I'm using Bootstrap-Daterangepicker (https://github.com/dangrossman/bootstrap-daterangepicker) to show the markup. It provides me a callback function.

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

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

Without AngularJS, this is going to be messy. I can call jQuery ajax and then fetch a list, then mess around with the DOM elements from within jQuery. But this is messy.

How can I include AngularJS in this scenario to make my life easier. (and the code a lot less cleaner) Please help. I'm stuck.

解决方案

You must use Angular $http service. For even better abstraction, you should go with $resource service.

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();
}

<html ng-app="my-app">
<div ng-controller="Controller">
  <input type="text" my-date-picker="changeDate($startDate, $endDate)" />
  <table>
    <tr ng-repeat="user in users">
      <td>{{user.name}}</td>
      <td>{{user.address}}</td>
    </tr>
  </table>
</div>
</html>

To accomodate the DateSelector, you wish to create a directive to encapsulate its requirements. The simplest one would be:

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});
            });
        }
    };
});

No need to worry with synchronism. As $resource is based on promises, it will be automagically bound when data is ready.

这篇关于如何使用异步与AngularJS用SpringMVC加载数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！