angular初步认识一

最近比较流行MVC前端框架开发，最近研究了一个框架AngularJS框架

不说那么多，先上例子，我是个代码控

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>capter1-angular</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng",
			items:[{
				action:"Buy Flowers",done:false
			},{
				action:"Get Shoes",done:false
			},{
				action:"Collect Tickets",done:true
			},{
				action:"Call Joe",done:false
			}]
		}

		var myApp = angular.module("myApp",[]);
		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}'s To Do List
			<span class="label label-default">{{todo.items.length}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control"/>
			<span class="input-group-btn">
				<button class="btn bth-default">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in todo.items">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

　看到几个比较特殊的点

1.html标签中多一个ng-app="myApp"

2.body标签中多一个ng-controller="MyCtrl"

3.tr标签中多了ng-repeat="item in todo.items"

4.{{}}是取值表达式

5.script里面多了一些angular.module 以及myApp.controller等方法

1.根据AngularJS的解释是,一个文档中只有一个ng-app的属性，可以说是文档的唯一标识，当angular发现这个标识的时候，下面的文档树都要经过angular编译

2.ng-controller的指令就是作为前端处理业务的controller层

3.作为一个前端或者后端，看到这个就会想到是一个for遍历集合

4.不用说了，就是取元素的值

5.这个两个方法数据绑定和处理的业务逻辑。

这里还提一点，$scope是一个全局变量，还有就是数据双向绑定，里面用到了一个ng-model指令，这个自己也在学习中，希望以后学习中能够知道他们的原理。

下面可以看到$scope是全局，在对象上增加一个方法，可以在html元素上 直接使用这个方法,看标题栏，还有几个事情没有做的计数

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>angularJS学习</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng",
			items:[{
				action:"Buy Flowers",done:false
			},{
				action:"Get Shoes",done:false
			},{
				action:"Collect Tickets",done:true
			},{
				action:"Call Joe",done:false
			}]
		}

		var myApp = angular.module("myApp",[]);
		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
			$scope.incompleteCount = function(){
				var _count = 0;
				angular.forEach($scope.todo.items,function(item){
					if(!item.done){
						_count++
					}
				});
				return _count;
			}
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}'s To Do List
			<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control"/>
			<span class="input-group-btn">
				<button class="btn bth-default">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in todo.items">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

自定义过滤器和发送ajax请求,写了一下代码，感觉使用挺简单，过滤器接受一个参数，list是angularJS提供的集合数据

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>angularJS自定义过滤器学习</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng"

		}

		var myApp = angular.module("myApp",[]);

		myApp.run(function($http){
			$http.get("/angular/todo.json").success(function(data){
				model.items = data;
			})
		});

		myApp.filter("checkedItems",function(){
			return function(list,showComplete){
				var resultArr = [];
				angular.forEach(list,function(item){
					if (!item.done || showComplete ) {
						resultArr.push(item);
					};
				});
				return resultArr;
			}
		});

		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
			$scope.incompleteCount = function(){
				var _count = 0;
				angular.forEach($scope.todo.items,function(item){
					if(!item.done){
						_count++
					}
				});
				return _count;
			}
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}'s To Do List
			<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control"/>
			<span class="input-group-btn">
				<button class="btn bth-default">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<!--普通的过滤器可以像下面那样 -->
				<!--<tr ng-repeat="item in todo.items | filter:{done:false}} | orderBy:'action'"> -->
				<!--自定义过滤器可以像下面那样 -->
				<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
		<div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div>
	</div>
</body>
</html>

再来一个好玩一点的，就是点击按钮可以天添加数据到列表中

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>angularJS数据绑定学习</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng"

		}

		var myApp = angular.module("myApp",[]);

		myApp.run(function($http){
			$http.get("/angular/todo.json").success(function(data){
				model.items = data;
			})
		});

		myApp.filter("checkedItems",function(){
			return function(list,showComplete){
				var resultArr = [];
				angular.forEach(list,function(item){
					if (!item.done || showComplete ) {
						resultArr.push(item);
					};
				});
				return resultArr;
			}
		});

		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
			$scope.incompleteCount = function(){
				var _count = 0;
				angular.forEach($scope.todo.items,function(item){
					if(!item.done){
						_count++
					}
				});
				return _count;
			}
			$scope.addNewItem = function(actionText){
				$scope.todo.items.push({"action":actionText,"done":false});
			}
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}'s To Do List
			<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control" ng-model="actionText"/>
			<span class="input-group-btn">
				<button class="btn bth-default" ng-click="addNewItem(actionText)">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
		<div class="checkbox-inline"><label><input type="checkbox" ng-model="showComplete" />Show Complete</label></div>
	</div>
</body>
</html>