angularjs
angularJS四大核心特性：
核心特性1：MVC
核心特性2：模块化与依赖注入
核心特性3：双向数据绑定
核心特性4：Directive与UI控件
1.使angularJS必须在html标签上加入app
<html ng-app="myApp">
2.定义控制器
var myApp=angular.module("myApp",[]);
myApp.controller("controllername",function($scope,$http){});
3.注意controller的作用域问题，即当前angular操作只能在当前的controller下；
4.angularJS数据的双向绑定
<input type="text" ng-model="person.name" placeholder="Your Name"/>
<span>{{person.name}}</span>
5.angularjs自定义标签(E)属性(A)(使用过滤器设置时间格式)
var myApp=angular.module("myApp",[]);
myApp.directive("clock",function($filter){
var date=new Date();
return{
restrict:"E",
replace:true,
//replace的值为false时不替换属性
template:function(ele,attr){
var dateStr=$filter("date")(date.getTime(),attr.dateFormat);
return "<span>"+dateStr+"</span>"
}
}
})；
<clock date-format="yyyy年MM月dd日 HH:mm:ss EEE"></clock>
6.angularjs上下文发生变化须在页面同时显示是必须加入digrest的apply属性
myApp.directive("isSame",function(){
return {
restrict:"A",
require:"ngModel",//指定在改属性所在的标签中必须加入ng-model指令
link:function(scope,element,attr,model){
//为当前元素标签绑定事件
element.bind("blur",function(){
console.log(element.val()+ " "+scope.pwd);
scope.$apply(function(){
if(element.val() == scope.pwd){
model.$error.samePwd = false;
}else{
model.$error.samePwd = true;
}
});
});
}
}
});
7.自定义过滤器：
//大小写转换
myApp.filter("upper",function(){
return function(input,value){
if(input){
if(value == 1){
return input.toUpperCase();
}else{
return input.toLowerCase();
}
}else{
return input;
}
}
});
//倒序输出
myApp.filter("desc",function(){
return function(input,value){
var descAry=[];
if(input){
for(var i=input.length-1;i>=0;i--){
descAry.push(input[i]);
}
if(value==1){
return descAry.join("");
}
else{
return input
}
}
else{
return input;
}
}
});
<div>
<span>输入文本:</span> <input type="text" ng-model="order" />
<span>倒序输出:</span> <input type="text" value="{{order | desc:1}}"/>
</div>
8.angularJS的重复注入(使用ng-repeat)
<tr ng-repeat="user in users">
<td>{{user.t_id}}</td>
<td>{{user.t_name}}</td>
<td>{{user.t_sex}}</td>
<td>{{user.t_adr}}</td>
......
</tr>
9.angularJs的ajax使用
$scope.add= function(){
if($scope.name && $scope.address && $scope.sex){
$http.post("/addUser",{"name":$scope.name,"address":$scope.address,"sex":$scope.sex}).success(function(data){
hideModal();
var page=$scope.curPage;
$scope.showAll(page,0);
}).error(function(error){
console.log(error);
});
}
};
注意：使用ajax必须在controller的函数中加入$http模块;
