angular学习笔记（一）-入门案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
angular学习笔记（⼀）-⼊门案例⼊门实例:
⼀个购物车产品清单,可以⾃⾏改变数量,总价⾃动计算的⼩例⼦:
代码如下:
<!DOCTYPE html>
<html ng-app>
<head>
<title>1.1实例:购物车</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
.red {
color:#cc0000
}
* {
font-family:'MICROSOFT YAHEI'
}
TD {
font-size:12px; color:#999;
}
</style>
</head>
<body >
<div ng-controller="CarController">
<h1>your shopping cart</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td><input ng-model="item.quantity"/></td>
<td>{{item.price|currency}}</td>
<td class="red">{{item.price*item.quantity|currency}}</td>
<td><button ng-click="remove($index)">remove</button></td>
</tr>
</table>
</div>
</body>
</html>
script.js代码:
function CarController ($scope) {
$scope.items = [
{"title":"兔⼦","quantity":1,"price":"100"},
{"title":"喵","quantity":1,"price":"200"},
{"title":"狗只","quantity":1,"price":"400"},
{"title":"仓⿏","quantity":1,"price":"300"}
];
$scope.remove = function(index){
$scope.items.splice(index,1)
}
}
下⾯对以上代码进⾏说明:
1.ng-app:
<html ng-app>:
ng-app属性,⽤来告诉页⾯哪⼀部分需要使⽤angular管理.通常情况下都这样管理.
(但是我在师傅的⽹站上看到不是这样的,是加在其它div上⾯的,⽽且是有值的.这个学到后⾯再说)
2. ng-controller:
<div ng-controller="CarController">
使⽤⼀个控制器来控制页⾯中的某个区域,这⾥就是管理这个<div>到</div>⾥的所有内容
这⾥使⽤的控制器就是script.js⾥定义的CarController函数
3. ng-repeat:
<tr ng-repeat="item in items">
循环当前的标签(包括⾥⾯的内容和⾃⼰),循环中的当前变量就是item,item在当前作⽤域的items变量⾥进⾏循环
即CarController⾥定义的$scope.items数组
4. {{ }}:
<td>{{item.title}}</td>
使⽤{{}}来动态的绑定视图⾥显⽰的数据.{{}}⾥就是当前作⽤域⾥的变量
5. ng-model:
ng-model="item.quantity"
ng-model⽤在输⼊框⾥,使输⼊的内容和它等于的变量数据进⾏绑定,
也就是说,输⼊的值变化,变量就变化,变量变化,视图上对应显⽰的数据也变化
6. currency:
<td>{{item.price|currency}}</td>
<td class="red">{{item.price*item.quantity|currency}}</td>
angular带有过滤器特性,可以⽤来做⽂本格式的转换,其中,currency货币过滤器,可以实现美元格式化
7. ng-click:
<button ng-click="remove($index)">remove</button>
为元素绑定click事件的回调,点击后就调⽤作⽤域下的remove⽅法,也就是在CarController中添加的remove⽅法
8. $index:
remove($index)
$index是在ng-repeat过程中的循环的索引值,从0开始
9. 控制器:
function CarController ($scope) {
...
}
控制器负责管理相关的区域的逻辑.函数的形参$scope就是当前区域的作⽤域,区域中的变量,⽅法,都从它的作⽤域中寻找.
⽐如这⾥的$scope.items和$scope.remove
10. 另外,ng-repeat所创建的列表是和数据的更新事实绑定的,所以当使⽤remove⽅法删除数据中的某⼀组数据,那么,视图中相应的ui也会被删除.相关代码托管:
https:///OOP-Code-Bunny/angular。