I am currently working on a spring MVC project where I have a JSP method that displays all the items in the database in one page with this.
I want to change from using JSP to Angular MVVC type of model so that it will be easy to search for products in the store.
<c:forEach items="${products}" var="p">
<c:if test="${p.quantity > 0}">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="photoProd?idProd=${p.idProduct}" class="img-responsive" />
<ul class="gridder">
<li class="gridder-list" data-griddercontent="#gridder-content-${p.idProduct}"></li>
</ul>
<div class="caption itemDiv" id="PRODDIV-${p.idProduct}">
<ul class="gridder">
<li class="gridder-list"
data-griddercontent="#gridder-content-${p.idProduct}">
<h4>${p.productName}</h4>
</li>
<li>Price: <small class="pull-right">NGN
${p.price}</small></li>
</ul>
<button class="btn btn-primary" id="BTN-${p.idProduct}">Add to Cart</button>
<!-- <a href="#" class="btn btn-default pull-right" role="button">Details</a> -->
</p>
</div>
</div>
</div>
<c:forEach items="${categories}" var="c">
<div id="gridder-content-${p.idProduct}" class="gridder-content">
<div class="row">
<div class="col-sm-6">
<img src="photoProd?idProd=${p.idProduct}"
class="img-responsive" />
</div>
<div class="col-sm-12">
<input type="hidden" id="NAMEDIV-${p.idProduct}"
value="${p.productName}"> <br /> <br />
Available Stocks:
<div id="QTYDIV-${p.idProduct}">${p.quantity}</div>
<input type="hidden" value="${p.quantity}"> <br>
<h2>${p.productName}</h2>
<p>${p.description}</p><br />
Product Category:
<h4>${c.nomCategory}</h4>
<p>NGN ${p.price}</p>
</div>
</div>
</div>
</c:forEach>
</c:if>
</c:forEach>
I tried to display these items by category, but it's not working, maybe there is something I am doing wrong. However I searched and decided to change my scope of display to a single page AngularJS app.
Now, I have this Angular script that loops through the product names (using a jsp foreach method-which i think is not the right way) and displays only one out of a list about 10 products that I have in the database
<body ng-app="webStore">
<div ng-controller="MyCtrl">
<p>{{value}}</p>
</div>
Script:
var MyCtrl = function($scope) {
<c:forEach items="${products}" var="p">
$scope.value = "${p.productName}";
</c:forEach>
}
I also have this Angular controller function that should display these products on the page but its not working.
angular.module('webStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
// Bind your route with your template and associated controller
// Your template will be loaded into ng-view area
when('https://waybackassets.bk21.net/LaboratoryEquipments', { templateUrl: 'https://waybackassets.bk21.net/LaboratoryEquipments', controller: MyController }).
// Default route
otherwise({redirectTo: '/'});
}]);
function MyController($scope, $routeParams, $http) {
// Here I use $http API from AngularJS but ng-resource may be easier to use
// when you have to deal with rest resources
$http.get('web/LaboratoryEquipments').success(function(data) {
$scope.product = data.product;
$scope.category = data.category;
});
}
here is the controller class from Spring MVC that retrieves the data and sends it to JSP
@RequestMapping(value = "/LaboratoryEquipments")
public String labEquip(Model model) {
int listSize = 0;
// -------------------GET DATA FROM DB------------------//
model.addAttribute("product", new Product());
model.addAttribute("products", work.listproducts());
model.addAttribute("categories", work.listCategories());
List<Product> prod = work.listproducts();
for (Product pr : prod) {
System.out.println(pr.getPhoto());
listSize++;
model.addAttribute("listSize", listSize);
model.addAttribute("cartItems", cartItems);
// -------------------generating possible order on
// cart-----------------------------------
this.cartService.addCartService(pr.getIdProduct(),
pr.getProductName(), 0, pr.getPrice());
}
return "labEquip";
}
I just want the AngularJS. I am new to angular, but I read a lot about many of it's very cool functionalities. So I am eager to know more and learn about it.
