Javascript 使用SpringMVC和AngularJS显示数据库中的项目

我目前正在从事一个springmvc项目，在这个项目中，我有一个JSP方法，可以在一个页面中显示数据库中的所有项目

我想从使用JSP更改为Angular MVVC类型的模型，以便在商店中轻松搜索产品

<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>

下面是SpringMVC中的控制器类，它检索数据并将其发送到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";
}

@RequestMapping（value=“/LaboratoryEquipments”）
公共字符串LabEquipm（模型）{
int listSize=0；
//--------------从数据库获取数据------------------//
model.addAttribute（“产品”，新产品（））；
model.addAttribute（“products”，work.listproducts（））；
model.addAttribute（“categories”，work.listCategories（））；
List prod=work.listproducts（）；
对于（产品pr:prod）{
System.out.println（pr.getPhoto（））；
listSize++；
model.addAttribute（“listSize”，listSize）；
model.addAttribute（“cartItems”，cartItems）；
//------------------在上生成可能的订单
//推车-----------------------------------
this.cartService.addCartService（pr.getIdProduct（），
pr.getProductName（），0，pr.getPrice（））；
}
返回“labEquip”；
}

---

我只想要AngularJS。我不熟悉angular，但我读了很多关于它的非常酷的功能。因此，我渴望了解更多信息。

欢迎来到Stackoverflow！。我简化了问题标题并格式化了问题。也消除了问题中的噪音。好的，谢谢。我希望现在能得到答案。

var MyCtrl = function($scope) {
<c:forEach items="${products}" var="p">  
  $scope.value = "${p.productName}";
  </c:forEach> 
}

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('/web/LaboratoryEquipments', { templateUrl: '/web/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;
});
}

@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";
}