在本文中，我们将探讨如何使用AngularJS来实现一个基本的购物车功能，其中包括商品的添加、减少、删除以及总价的计算。AngularJS以其强大的双向数据绑定和模型驱动的特性，使得这种实现变得非常直观和高效。
让我们看下服务端的实现。这里使用了C#来创建一个简单的API接口，包含两个方法。`GetCar()` 方法返回一个购物车商品列表，包含商品标题、单价和数量。`AddCar()` 方法接收更新后的购物车商品列表，并返回确认信息。这展示了后端如何与前端进行数据交互。
```csharp
public class ShoppingCar
{
public string Title { get; set; }
public decimal UnitPrice { get; set; }
public int Count { get; set; }
}
public ActionResult GetCar()
{
List<ShoppingCar> cars = new List<ShoppingCar>
{
// 商品实例
};
return Json(cars, JsonRequestBehavior.AllowGet);
}
public ActionResult AddCar(List<ShoppingCar> car)
{
return Json("ok", JsonRequestBehavior.AllowGet);
}
```
接下来是前端部分，这部分使用HTML和AngularJS指令来展示购物车和执行操作。`ng-app` 和 `ng-controller` 指令定义了应用的范围和控制器。表格中的每一行由 `ng-repeat` 指令遍历购物车商品，显示每个商品的信息。`ng-model` 绑定商品数量到商品对象，允许直接修改数据源。`ng-click` 用于触发按钮的点击事件，调用控制器中的方法更新商品数量或删除商品。
```html
<div ng-app="DemoApp" ng-controller='CartController'>
<!-- 表格结构省略 -->
<input type="text" ng-cloak ng-model="item.Count">
<button ng-click="UpdateCar(item.Title,1)">+</button>
<button ng-click="UpdateCar(item.Title,-1)">-</button>
<!-- 其他HTML元素省略 -->
</div>
```
然后，我们创建AngularJS模块和控制器。`CartController` 控制器中，`$scope` 对象包含了购物车商品列表 `ShoppingCar` 和总价格 `total`。`UpdateCar()` 方法负责根据商品标题和增减量更新商品数量，计算总价格的方法会自动更新。
```javascript
var app = angular.module('DemoApp', []);
app.controller('CartController', ['$scope', function ($scope) {
$scope.ShoppingCar = []; // 初始化购物车
$scope.total = 0;
// 获取购物车数据
// $http.get('/api/GetCar').success(function(data) {
// $scope.ShoppingCar = data;
// });
// 更新购物车商品数量
$scope.UpdateCar = function(title, increment) {
var item = $scope.ShoppingCar.find(x => x.Title === title);
if (item) {
item.Count += increment;
$scope.total = $scope.ShoppingCar.reduce(function(total, item) {
return total + (item.Count * item.UnitPrice);
}, 0);
}
};
// 提交购物车
$scope.submit = function() {
// 调用后端接口提交购物车数据
};
}]);
```
在这个示例中，我们没有展示获取购物车数据和提交购物车数据的具体实现，但可以通过 `$http` 服务来完成与后端的通信。`$http.get()` 可以用来获取数据，`$http.post()` 或 `$http.put()` 可以用来提交或更新数据。
总结起来，这个AngularJS实现的购物车功能利用了其核心特性：双向数据绑定（`ng-model`），指令（`ng-repeat`, `ng-click`）和依赖注入（`$scope`, `$http`）。通过这种方式，开发者可以专注于数据逻辑，而不用过多地关心DOM操作，从而提高了开发效率和代码可维护性。
