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的值对应。
ng-controller
要明确创建一个$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> |
1、在html声明： <html ng-app>
2、导入Angular JS文件：<script src="../js/angular.min.js"></script>
3、定义一个函数：
function Testcontrollerl($scope){
$scope.money=150;
}
<p>{{money |currency:"￥"}}</p>
p标签会显示￥150,所以，在需要显示的标签里面输入{{}}，{{}}表示着单项绑定，取消双花括号表示双向绑定。
ajax
$http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。
demoApp.controller("demoController", function($http,$scope){
$scope.getAjaxUser = function(){
$http.get("../xxx.action").success(function(data){
alert(data);
}).error(function(){
Alert(“出错了！”);
});
};
});
表达式
ng中的表达式不可以划等号，ng-click=”。
过滤器
filter
我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，如下：
{{ expression | filter }}
currency 货币处理；
{{num | currency : '￥'}}
date日期格式化；
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
filter匹配子串；
{{childrenArray | filter : func }}
json格式
json过滤器可以把一个js对象格式化为json字符串，没有参数。
{{ jsonTest | json}}
limitTo
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。
{{ childrenArray | limitTo : 2 }}
orderBy
过滤器可以将一个数组中的元素进行排序
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序，若是-age，则倒序
指令
1.指令(directive)：ng提供的或者自定义的标签和属性，用来增强HTML表现力；
2.标记(markup)：即双大括号{{}}，可将数据单向绑定到HTML中；
3.过滤器(filter)：用来格式化输出数据；
4.表单控制：用来增强表单的验证功能。