angularJS介绍
angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
一、趋势互联网未来的发展趋势是前端后端只靠json数据来进行通信。后端只处理和发送一段json数据到前端，然后计算和模板渲染都在前端进行，而前端的改动，形成json数据然后传回到后端。未来趋势就是：后台程序再也不做模板的任何处理。
二、angularjs作用AngularJS的作用简单说就是就是把后台的json数据直接用html进行渲染，然后html的操作又直接形成json数据传回后台。未来的后台MVC，视图不再是模板了，而是一段结构整齐标准的JSON，而这个JSON作为前台的model（数据源）直接在AngularJS直接使用。或者说后台的视图是前台的模型，而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。
三、angular是否简化的前端开发，是否符合未来前端的开发趋势？
以现在的js的发展程度来看，angular是符合发展趋势的：
第一、解耦前端；
第二、可以模块化；
第三、可测试；
第四、天生支持json；
第五、依赖注入。
还有一些其他特性使得angular跟随甚至是推动了前端的开发趋势。
所以说学习angular是有好处的：
1.了解前端的开发趋势
2.学习MVW(MVVM)的设计方法
3.学习模块化编程
4.学习如何测试模块
5.使用angular简化开发流程
6.随着google的大力支持和逐渐流行，公司开始使用angular，有些岗位需要有angular的知识才能工作。
angularJS购物车功能
这里我为大家提供我们所需要的angular1.4.6.js的下载路径：angular1.4.6.js下载
首先我们来看一下我们的层级关系：
如图所示：
我们来看一下我们所需要的json数据
yao.json
代码如下：
[
{
"gname": "云南白药",
"address": "云南",
"num": 3,
"regDate": "1371120093221",
"price": 36,
"state": "发货"
}, {
"gname": "999感冒灵",
"address": "北京",
"num": 2,
"regDate": "1371399948599",
"price": 22,
"state": "发货"
}, {
"gname": "感康",
"address": "河北",
"num": 5,
"regDate": "1371394846499",
"price": 18,
"state": "已发货"
}, {
"gname": "板蓝根",
"address": "河南",
"num": 30,
"regDate": "1371394846499",
"price": 19,
"state": "已发货"
}, {
"gname": "创可贴",
"address": "吉林",
"num": 80,
"regDate": "1371394846499",
"price": 7,
"state": "已发货"
}
]
然后我们来看一下我们的jsp页面
angular.jsp
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 400px;
height:300px ;
background: #ccc;
}
div p{
width: 300px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
}
div input{
width: 200px;
height: 30px;
}
div button{
display: block;
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="qx()">全选</button>
<button ng-click="fx()">反选</button>
<button ng-click="qbx()">全不选</button>
<button ng-click="plsc()">批量删除</button>
<button ng-click="allDel()">清空购物车</button>
<button ng-click="add()">添加</button>
<button ng-click="dx(price)">倒序</button>
<input type="text" placeholder="请输入名称" ng-model="search" />
<table border="1" width="70%" >
<tr>
<th>选项 </th>
<th>名称</th>
<th>产地</th>
<th>数量</th>
<th>生产时间</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in goods | filter:{gname:search} | orderBy:order+orderType">
<td><input type="checkbox" ng-model="x.ck" /> </td>
<td>{{x.gname}}</td>
<td>{{x.address}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)" />
<span>{{x.num}}</span>
<input type="button" value="+" ng-click="jia($index)" />
</td>
<td>
{{x.regDate|date:'yyyy-MM-dd hh:mm:ss'}}
</td>
<td>
{{x.price | currency :"￥"}}
</td>
<td>
{{x.num * x.price | currency:"￥"}}
</td>
<td>
<input type="button" value="删除" ng-click="del($index)" />
<input type="button" value="修改" ng-click="upda($index)" />
</td>
</tr>
<tr>
<td colspan="8">
<span>总价</span>
<span ng-bind="allSum()|currency:'￥'"></span>
</td>
</tr>
</table>
<!--添加操作-->
<div ng-show="addShow" >
<p>名称 ： <input ng-model="name" type="text" placeholder="请输入名称" /></p>
<p>产地 ： <input ng-model="addre" type="text" placeholder="请输入产地" /></p>
<p>价格 ： <input ng-model="prices" type="text" placeholder="请输入价格" /></p>
<button ng-click="trueAdd()">确认添加</button>
</div>
<!--修改操作-->
<div ng-show="updShow" >
<p>名称 ： <input ng-model="obj.name" type="text" placeholder="请输入名称" /></p>
<p>产地 ： <input ng-model="obj.addre" type="text" placeholder="请输入产地" /></p>
<p>价格 ： <input ng-model="obj.prices" type="text" placeholder="请输入价格" /></p>
<button ng-click="trueUpd()">确认修改</button>
</div>
</body>
<script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>
<script>
var vm=angular.module('myApp',[])
vm.controller('myCtrl',function($scope,$http){
//如果需要调用外部数据，在scope 后面加上 http 服务
$http.get("yao.json").then(function(res){
$scope.goods=res.data
//修改数据
//定义一个空对象 接受临时数据
$scope.obj={}
//定义一个索引值
var idx=-1
$scope.upda=function($index){
$scope.updShow=true
//将goods里面对应的数据放到obj中
$scope.obj.name=$scope.goods[$index].gname
$scope.obj.addre=$scope.goods[$index].address
$scope.obj.prices=$scope.goods[$index].price
idx=$index
}
//数据修改
$scope.trueUpd=function(){
$scope.goods[idx].gname=$scope.obj.name
$scope.goods[idx].address=$scope.obj.addre
$scope.goods[idx].price=$scope.obj.prices
$scope.updShow=false
}
//添加
$scope.add=function(){
$scope.addShow=true
}
//定义当前时间
// var theTime=new Date().toLocaleTimeString()
//确认添加逻辑实现
$scope.trueAdd=function(){
//赋值操作
var name= $scope.name
var addre= $scope.addre
var prices= $scope.prices
//添加操作
$scope.goods.push({
gname:name,
address:addre,
price:prices,
num:1,
regDate:1371120093221
})
//数据清空
$scope.name=""
$scope.addre =""
$scope.prices =""
$scope.addShow=false
}
//总价
$scope.allSum=function(){
var allProce=0
for (var i=0 ;i<$scope.goods.length;i++) {
allProce+=$scope.goods[i].price * $scope.goods[i].num
}
return allProce
}
//倒序
$scope.order=""
$scope.dx=function(type){
$scope.orderType=type
if ($scope.order=="") {
$scope.order="-"
} else{
$scope.order=""
}
}
//数据加减
//加
$scope.jia=function(index){
$scope.goods[index].num++
}
//减
$scope.jian=function(index){
if ($scope.goods[index].num>1) {
$scope.goods[index].num--
} else{
$scope.goods.splice(index,1)
}
}
//清空购物车
$scope.allDel=function(){
if ($scope.goods.length==0) {
alert("购物车为空")
} else{
$scope.goods=[]
}
}
//批量删除
$scope.plsc=function(){
if (confirm("确定要删除吗？？")) {
for (var i=0 ; i<$scope.goods.length ; i++) {
if ($scope.goods[i].ck==true) {
$scope.goods.splice(i,1)
i--
}
}
}
}
//单个删除
$scope.del=function(index){
$scope.goods.splice(index,1)
}
//全选
$scope.qx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
x.ck=true
}
}
//反选
$scope.fx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=!x.ck
}
}
}
//全不选
$scope.qbx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=false
}
}
}
})
})
</script>
</html>
效果如图所示：
查询功能
如图所示：
修改功能
如图所示：
谢谢大家，多多指教！！！
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
