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>
- 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 () 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.
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>
- 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./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.
Share Improve this question edited Mar 1, 2013 at 12:10 LittleLebowski asked Mar 1, 2013 at 11:47 LittleLebowskiLittleLebowski 7,94113 gold badges49 silver badges75 bronze badges2 Answers
Reset to default 6You 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 acodate 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.
you should do something like this:
SpringMVC Controller:
@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 Controller:
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);
});
}
}
View
<!-- Activating AngularJS in the entire document-->
<html ng-app>
<head>
<!-- Adding AngularJS and our controller -->
<title>Luigi's world MVC bananas</title>
<link href="css/style.css" rel="stylesheet">
<script src="//ajax.googleapis./ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="js/controller.js"></script><!-- our controller -->
</head>
<!-- Activating carsCtrl in the body -->
<body ng-controller="carsCtrl">
<div class="carsFrame">
<!-- AngularJS manages cars injection after have loaded the 3 first-->
<!-- We use ng-src instead src because src doesn't work in elements generated by AngularJS -->
<div ng-repeat="car in cars" class="carsFrame">
<img ng-src="{{car.src}}"/>
<h1>{{car.name}}</h1>
</div>
</div>
<div id="button_container">
<!-- ng-click binds click event with AngularJS' $scope-->
<!-- Load function is implemented in the controller -->
<!-- As I said in the controller javascript cannot know the context, so we give it as a parameter-->
<button type="button" class="btn btn-xlarge btn-primary" ng-click="load('${pageContext.request.contextPath}')">3 more...</button>
</div>
</body>
</html>
The plete example is here