AngularJS入门与实践-优快云博客

Angular JS是一个框架，增强了对DOM操作的灵活性。但是Angular JS不适用于频繁DOM操作里面。

Angular JS特性：

1、双向的数据绑定

2、模板

3、mvc

4、服务和依赖注入

5、指令

scopes

是把dom元素连接到controller上的对象。

module

在<html>标签上多了一个属性ng-app=”MyApp”，它的作用就是用来指定ng的作用域是在<html>标签以内部分。在js中，我们调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。

要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性

<div ng-controller="MyController"> {{ person.name }} </div>

<!DOCTYPE html>
	<html ng-app>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="../js/angular.min.js"></script>
	<script>
	function Testcontrollerl($scope){
	$scope.money=150;
	$scope.date=new Date();
	$scope.students=[
	{id:1,name:"孙悟空",age:20,phone:123123},
	{id:2,name:"猪八戒",age:40,phone:456456},
	{id:3,name:"沙和尚",age:60,phone:789789},
	{id:4,name:"唐僧",age:80,phone:7410740}
	]
	$scope.txts="123456789";
	}
	</script>
	</head>
	<body>
	<div ng-controller="Testcontrollerl">
	<p>{{money \|currency:"￥"}}</p>

	<p id="p1">{{date \| date:"yyyy-MM-dd HH:mm:ss"}}</p>

	<p>
	{{students\| orderBy:["age"] }}
	</p>

	<p>{{students\| filter:{age:"20"} }}</p>


	<p>
	<select ng-model="orderText">
	<option value="name">升序</option>
	<option value="-name">降序</option>
	</select>
	</p>
	<p>
	<input type="text" ng-model="searchText"/>
	</p>
	<p>{{txts\|number:2}}</p>

	<table>
	<tr>
	<td>序号</td>
	<td>姓名</td>
	<td>年龄</td>
	<td>电话</td>
	</tr>
	<tr ng-repeat="student in students\|orderBy:orderText \|filter:searchText ">
	<td>{{student.id}}</td>
	<td>{{student.name}}</td>
	<td>{{student.age}}</td>
	<td>{{student.phone}}</td>
	</tr>
	</table>

	</div>
	</body>

	</html>