AngularJS实例教程
包含内容: 源码,全套工具
作者QQ549710689
下载Demo
Demo中使用的工具可以在百度云下载:
Eclipse: http://pan.baidu.com/s/1c4f5zo
Tomcat: http://pan.baidu.com/s/1c1KGqPE
Maven: http://pan.baidu.com/s/1kVeKHDl
MySql服务器: http://pan.baidu.com/s/1b7ThBg
MySql客户端(sqlyog): http://pan.baidu.com/s/1hs5Vmbq
JDK1.7: http://pan.baidu.com/s/1pLBMCHH
为了更好的学习，下面先简单介绍下AngularJs
1.AngularJS
AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护。它的最新版本是1.3.14。项目中对AngularJS进行了集成,下载demo后可以查看, 也可以到官网: https://angularjs.org/ 进行下载
1.1AngularJs开发js库的引入:
<script type="text/javascript" src="<%=contextPath%>/jsLib/angular/angularjs.js"></script>
1.2AngularJs在html中的申明
<div ng-app='shopCarApp' ng-controller="carShopController">
一个html页面中只能有一个ng-app, 却可以有多个ng-controller
js中对ng-app和ng-controller的初始化
var appShopCar = angular.module("shopCarApp", [], function($provide){
});appShopCar.controller("carShopController", function ($scope, $http) {
});1.3数据双向绑定:
AngularJs最大的特性便是双向绑定,也就是Js中的数据变动时，可以实时动态将数据结果根据预先写好的规则反应到界面上
比如: $scope.data = 1;
<td>{{item.data}}</td> 则页面中应该显示为1；
如果$scope.data被动态修改为 2,页面会动态显示为 2
双向绑定带来的好处是开发人员只需要专注于业务逻辑的处理，页面上元素的变化不需要过多的关注与处理
1.4数据通讯:
POST方法:
$http.post("/AngularJs/goods/saveGoods.htm", //后台URL地址
{
goodsList : JSON.stringify($scope.carShop), //请求参数
})
.success(function (data, header, config, status) {
if(data.stateCode == 0){ //结果处理
alert(data.desc);
}
})
.error(function (data, header, config, status) {
console.log(data);
});GET方法：
$http.get("/AngularJs/user/get.htm", //后台URL地址
{params: {param: $scope.param}}) //请求参数
.success(function (data, header, config, status) {
console.log(data); //结果处理
})
.error(function (response) {
console.log(response);
});好了，有关更多的AngularJs的信息可以到网上进行查阅
2 运行效果
启动项目，访问地址： http://localhost:8080/AngularJs/jsp/shopCar.jsp
效果图:
2.1 点击清空购物车,则商品会被全部清空
2.2 点击添加商品按钮，弹出商品编辑对话框，编辑产品编辑，产品名称，购买数量，产品单价
2.3 点击提交商品按钮，将前台商品信息传到后台进行保存
2.4 点击购买数量上的+-按钮时，商品数量会相应的+1,-1, 对应的产品总价进行变化，总购买价也会进行变化
3. 代码介绍:
代码框架如图:
3.1 数据库表:
创建数据表:t_goods
CREATE TABLE `t_goods` ( `GoodsId` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '商品主键', `GoodsNo` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '商品编号', `GoodsName` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '商品名字', `GoodsNum` int(10) DEFAULT NULL COMMENT '购买数量', `GoodsPrice` decimal(10,2) DEFAULT NULL COMMENT '商品单价', PRIMARY KEY (`GoodsId`) ) ENGINE=InnoDB AUTO_INCREMENT=47 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci
3.2 修改jdbc.properties连接数据库的用户名与密码
url=jdbc\:mysql\://127.0.0.1\:3306/t_angular?characterEncoding=utf-8&allowMultiQueries=true #url=jdbc:mysql://www.ad186.com:3306/hctl?characterEncoding=utf-8 username=root password=ajqnhwvia
3.2 前台代码
3.2.1 前台代码使用了bootstrap进行效果上的渲染, bootstrap下载: http://v3.bootcss.com/
3.2.2 商品列表页面代码:
<body ng-app='shopCarApp' ng-controller="carShopController">
<div class="container">
<table class="table" ng-show="carShop.length">
<thead>
<tr>
<th>产品编号</th>
<th>产品名字</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in carShop">
<td>{{item.goodsNo}}</td>
<td>{{item.goodsName}}</td>
<td>
<form class="form-inline">
<div class="form-group">
<button type="button" ng-click="reduce(item.goodsNo)" class="btn btn-primary">-</button>
<input type="text" class="form-control" id="exampleInputName2" value="{{item.goodsNum}}" ng-model="item.goodsNum" >
<button type="button" ng-click="add(item.goodsNo)" class="btn btn-primary">+</button>
</div>
</form>
</td>
<td>{{item.goodsPrice}}</td>
<td>{{item.goodsPrice * item.goodsNum}}</td>
<td>
<button type="button" ng-click="remove(item.goodsNo)" class="btn btn-danger">移除</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="2">
</td>
</tr>
</tbody>
</table>
<b>总购买价:</b>{{totalPrice()}} <b>总购买数量:</b>{{totalQuantity()}}<br>
<p ng-show="!carShop.length">您的购物车为空</p>
<button type="button" ng-click="clearShop()" class="btn btn-danger">清空购物车</button>
<button type="button" ng-click="addCarShop()" class="btn btn-danger">添加商品</button>
<button type="button" ng-click="saveGoods()" class="btn btn-danger">提交商品</button>
</div>3.3 商品编辑框代码:
<!-- 添加商品 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel" style="float: left;">新增商品</h4> <button type="button" class="close closeModel" aria-label="Close" onClick="closeMod()"><span aria-hidden="true">×</span><tton> </div> <form id="goodsInfoForm" class="form-horizontal" role="form" style="margin-left: 30px; margin:30px;"> <div class="form-group"> <label for="goodsNo" class="col-sm-3 control-label"><span class="star_tip">*</span>产品编号：</label> <div class="col-sm-8"> <input ng-model="goods.goodsNo" type="text" class="form-control" id="goodsNo" name="goodsNo" value='1111' placeholder="产品编号"/> </div> </div> <div class="form-group"> <label for="goodsName" class="col-sm-3 control-label"><span class="star_tip">*</span>产品名称：</label> <div class="col-sm-8"> <input ng-model="goods.goodsName" type="text" class="form-control" id="goodsName" name="goodsName" value='iphone8' placeholder="产品名称"> </div> </div> <div class="form-group"> <label for="goodsNum" class="col-sm-3 control-label"><span class="star_tip">*</span>购买数量：</label> <div class="col-sm-8"> <input ng-model="goods.goodsNum" type="text" class="form-control" id="goodsNum" name="goodsNum" value='12' placeholder="购买数量"> </div> </div> <div class="form-group"> <label for="goodsPrice" class="col-sm-3 control-label"><span class="star_tip">*</span>产品单价：</label> <div class="col-sm-8"> <input ng-model="goods.goodsPrice" type="text" class="form-control" id="goodsPrice" name="goodsPrice" value='12' placeholder="产品单价"> </div> </div> <div class="modal-footer" style="text-align:center;"> <button type="button" class="btn btn-primary" id="save" ng-click="addGoods()">保存<tton> <button type="button" class="btn btn-default closeModel" onClick="closeMod()">关闭<tton> </div> </form> </div> </div> </div>
3.4 js逻辑代码处理
包括:AngularJs模块初始化，商品信息的加载，商品信息的增加，删除，提交
var appShopCar = angular.module("shopCarApp", [], function($provide){
// 从服务器上获取初始化数据
$provide.service('carShop',function($http){
var carShop = [];
return carShop;
})
});
appShopCar.controller("carShopController", function ($scope, $http) {
console.log('加载 carShopController');
$http.get("/AngularJs/goods/getGoods.htm")
.success(function (data, header, config, status) {
console.log(data);
$scope.carShop = data.data;
})
.error(function (response) {
console.log(response);
});
/**
* 计算购物总价
*/
$scope.totalPrice = function () {
var total = 0;
angular.forEach($scope.carShop, function (item) {
total += item.goodsNum * item.goodsPrice;
})
return total;
}
/**
* 计算总购买数
*/
$scope.totalQuantity = function () {
var total = 0;
angular.forEach($scope.carShop, function (item) {
total += parseInt(item.goodsNum);
})
return total;
}
/**
* 找一个元素的索引
*/
var findIndex = function (goodsNo) {
var index = -1;
angular.forEach($scope.carShop, function (item, key) {
if (item.goodsNo === goodsNo) {
index = key;
return;
}
});
return index;
}
/**
* 为某个产品添加一个数量
*/
$scope.add = function (goodsNo) {
var index = findIndex(goodsNo);
if (index !== -1) {
++$scope.carShop[index].goodsNum;
}
}
/**
* 为某个产品减少一个数量
*/
$scope.reduce = function (goodsNo) {
var index = findIndex(goodsNo);
if (index !== -1) {
var item = $scope.carShop[index];
if(item.goodsNum > 1){
--item.goodsNum;
}else{
var returnKey = confirm('是否从购物车内删除该产品!');
if(returnKey){
$scope.remove(goodsNo);
}
}
}
}
/**
* 移除一项
*/
$scope.remove = function (goodsNo) {
var index = findIndex(goodsNo);
// 如果找到了那个item
if (index !== -1) {
$scope.carShop.splice(index, 1);
}
// 自动做脏检查
}
/**
* 清空购物车
*/
$scope.clearShop = function(){
$scope.carShop.length = 0;
}
/**
* 添加商品
*/
$scope.addCarShop = function(){
addCarShop();
}
/**
* 保存商品
*/
$scope.addGoods = function() {
//$('#goodsInfoForm').bootstrapValidator('validate');
var bSuccess = $('#goodsInfoForm').data("bootstrapValidator").isValid();
if(bSuccess){
console.log($scope.goods);
console.log(JSON.stringify($scope.goods));
/*$scope.goods.goodsNum = 4;
$scope.goods.goodsPrice = 23000;*/
var goods = {};
goods.goodsNo = $scope.goods.goodsNo;
goods.goodsName = $scope.goods.goodsName;
goods.goodsNum = $scope.goods.goodsNum;
goods.goodsPrice = $scope.goods.goodsPrice;
$scope.carShop.push(goods);
closeMod();
}
}
/**
* 提交商品
*/
$scope.saveGoods = function(){
if($scope.carShop.length == 0){
alert('没有商品提交');
return;
}
var postCfg = {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (data) {
return $.param(data);
}
};
$http.post("/AngularJs/goods/saveGoods.htm",
{
goodsList : JSON.stringify($scope.carShop),
},
postCfg)
.success(function (data, header, config, status) {
if(data.stateCode == 0){
alert(data.desc);
}
})
.error(function (data, header, config, status) {
console.log(data);
});
}
});
$(function () {
//校验form表单
//校验bootstrap form表单
$('#goodsInfoForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'goodsNo': {
validators: {
notEmpty: {
message: '产品编号不能为空'
},
stringLength: {
min: 4,
message: '产品编号最少4位'
},
numeric: {
message: '税额只能输入数字'
}
}
},
'goodsName': {
validators: {
notEmpty: {
message: '产品名称不能为空'
}
}
},
'goodsNum': {
validators: {
notEmpty: {
message: '购买数量不能为空'
},
numeric: {
message: '税额只能输入数字'
}
}
},
'goodsPrice': {
validators: {
notEmpty: {
message: '产品单价不能为空'
},
numeric: {
message: '税额只能输入数字'
}
}
}
}
}).on('success.form.bv', function(e) {
alert('aaaaa');
});
});
/**
* 清除控件元素中的内容
*/
function formClear() {
}
//添加数据
function addCarShop() {
formClear();
//这个modal函数是bootstrap.js中的函数
$("#myModal").modal("show");
}
/*
*关闭窗口
*/
function closeMod(){
//重置form表单
$('#goodsInfoForm').data('bootstrapValidator').resetForm(true);
$("#myModal").modal("hide");
}3.5 后台处理, 前台与后台通讯的数据格式为json
保存商品信息
@RequestMapping("/saveGoods.htm")
@ResponseBody
public Result saveGoods(ModelMap map, HttpServletRequest request)
{
String strGoodsList = request.getParameter("goodsList");
List<Goods> lstGoods = JSON.parseArray(strGoodsList, Goods.class);
Result result = new Result();
result.setStateCode("0");
result.setDesc("提交商品成功");
int nCount = goodsService.insertBatchGoods(lstGoods);
return result;
}查询商品信息
@RequestMapping("/getGoods.htm")
@ResponseBody
public Result getGoods(ModelMap map, HttpServletRequest request)
{
Goods goods = new Goods();
List<Goods> lstGoods = goodsService.selectGoods(goods);
Result result = new Result();
result.setStateCode("0");
result.setDesc("查询成功");
result.setData(lstGoods);
return result;
}