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模块;