index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>运动商城</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
<style>
.navbar-right { float: right !important; margin-right: 5px;}
.navbar-text { margin-right: 10px; }
</style>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/filters/customFilters.js"></script>
<script src="js/controllers/shopCart.js"></script>
<script src="js/controllers/sportStore.js"></script>
<script src="js/controllers/productList.js"></script>
<script src="js/controllers/checkout.js"></script>
</head>
<body ng-controller="sportStoreCtrl">
<h1>运动商城</h1>
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">运动商城</a>
<div class="navbar-right" ng-controller="cartCtrl">
<div class="navbar-text">
<b>您的购物车:</b>
{{count()}}个商品, RMB {{money()| currency:"RMB ￥"}}
</div>
<a class="btn btn-default navbar-btn" href="#checkout">结账</a>
</div>
</div>
<div ng-view></div>
</body>
</html>
创建一个views包
checkoutSummary.html
<h2>您的购物车</h2>
<div>
<div class="alert alert-warning" ng-show="cart.length==0">
您的购物车是空的。<a href="#productList" class="alert-link">继续购物</a>
</div>
<div ng-hide="cart.length==0">
<table class="table">
<thead>
<tr >
<th>数量</th>
<th>商品名称</th>
<th class="text-right">单价</th>
<th class="text-right">小计</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart">
<td class="text-left">{{item.product.name}}</td>
<td class="text-center">{{item.number}}</td>
<td class="text-right">{{item.product.price | currency:"RMB ￥"}}</td>
<td class="text-right">{{item.number*item.product.price | currency:"RMB ￥"}}</td>
<td>
<button class="btn btn-sm btn-warning" ng-click="remove(item)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">总金额:</td>
<td class="text-right">
{{totalMoney() | currency:"RMB ￥"}}
</td>
</tr>
</tfoot>
</table>
<div class="text-center">
<a class="btn btn-primary" href="#productList">继续购物</a>
<a class="btn btn-primary" href="#placeOrder">提交订单</a>
</div>
</div>
</div>
placeOrder.html
<style>
.ng-invalid { background-color: lightpink; }
.ng-valid { background-color: lightgreen; }
span.error { color: red; font-weight: bold; }
</style>
<h2>现在付款</h2>
<p>请输入您的详细信息，我们将尽快发货!</p>
<form name="shippingForm" novalidate>
<div class="well">
<h3>收货人:</h3>
<div class="form-group">
<label>姓名:</label>
<input name="name" class="form-control" required ng-model="data.shipping.name"/>
<span class="error" ng-show="shippingForm.name.$error.required && shippingForm.name.$dirty ">请输入姓名</span>
</div>
<h3>收货地址：</h3>
<div class="form-group">
<label>国家：</label>
<input name="country" class="form-control" ng-model="data.shipping.country" required/>
<span class="error" ng-show="shippingForm.country.$error.required && shippingForm.country.$dirty"/>请输入国家名</span>
</div>
<div class="form-group">
<label>省份：</label>
<input name="state" class="form-control" ng-model="data.shipping.state" required />
<span class="error">请输入一个省份</span>
</div>
<div class="form-group">
<label>城市：</label>
<input name="city" class="form-control" ng-model="data.shipping.city" required />
<span class="error">请输入一个城市名称</span>
</div>
<div class="form-group">
<label>街道地址:</label>
<input name="street" class="form-control" ng-model="data.shipping.street" required/>
<span class="error">请输入一个街道地址</span>
</div>
<div class="form-group">
<label>邮政编码：</label>
<input name="zip" class="form-control" ng-model="data.shipping.zip" required />
<span class="error">请输入邮政编码</span>
</div>
<h3>选择：</h3>
<div class="checkbox">
<label>
<input name="giftwrap" type="checkbox"/>
包装成礼物
</label>
</div>
<div class="text-center">
<button class="btn btn-primary" ng-disabled="shippingForm.$invalid" ng-click="sendOrder()">
完成订单
</button>
</div>
</div>
</form>
productList.html
<!--<div class="navbar navbar-inverse">-->
<!--<a class="navbar-brand" href="#">运动商城</a>-->
<!--<div class="navbar-right" ng-controller="cartCtrl">-->
<!--<div class="navbar-text">-->
<!--<b>您的购物车:</b>-->
<!--{{count()}}个商品, RMB {{money()| currency:"RMB ￥"}}-->
<!--</div>-->
<!--<a class="btn btn-default navbar-btn" href="#checkout">结账</a>-->
<!--</div>-->
<!--</div>-->
<div class="panel panel-default row"><!--ng-controller="productCtrl"-->
<div class="col-xs-3">
<!--商品类别放这里-->
<a class="btn btn-block btn-default btn-lg" ng-click="selectCategory()" ng-class="item.category==selectedCategory?'btn-primary':''">首页</a>
<!--生成导航元素-->
<a class=" btn btn-block btn-default btn-lg" ng-repeat="item in data.categories " ng-click="selectCategory(item.category)" ng-class="item.category==selectedCategory?'btn-primary':''">
{{item.category}}
</a>
</div>
<div class="col-xs-8">
<!--产品信息放这里-->
<div class="well" ng-repeat="product in data.products | filter:filterByCategory|pagerFilter:pageNum:pageSize">
<h3>
<strong>{{product.name}}</strong>
<span class="pull-right label label-primary">{{product.price|currency:"RMB ￥"}}</span>
</h3>
<button class="btn btn-success btn-sm pull-right" ng-click="add(product)">加入购物车</button>
<img ng-src="{{product.imgsrc}}" style="padding-right: 10px;"/><span class="lead">{{product.desc}}</span>
</div>
<!--分页导航按钮-->
<div class="pull-right btn-group">
<a class="btn btn-default"
ng-click="selectPage(number)"
ng-class="number==pageNum? 'btn-primary':''"
ng-repeat="number in data.products | filter:filterByCategory | pageNavFilter:pageSize">{{number}}</a>
</div>
</div>
</div>
thankYou.html
<div class="alert alert-danger" ng-show="data.shipping.errStatus">
错误{{data.shipping.errStatus}} 您的订单无法处理。
<a href="#productList" class="alert-link">再次尝试</a>
</div>
<div class="well" ng-hide="data.shipping.errStatus">
<h2>Thanks!</h2>
感谢下单!我们将第一时间给您发货。如果您需要联系我们，请参考123456789。
</div>
扫一扫
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
