這一節相對來說需要理解的東西不是太多，記住了那些api就行了。
還是一個案例(同樣來自miaov)，一個表單驗證，先上代碼，然后再對對應的內容進行解釋。
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <div ng-controller="Aaa"> <form novalidate name="nForm"> <div> <label>用戶名</label> <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)"> <span ng-repeat="re in regText.regList|filter:regText.regVal">{{re.tips}}</span> </div> <div> <label>密碼</label> <input type="text" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)"> <span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span> </div> </form> </div> <body> <script src="angular.min.js"></script> <script> var m1=angular.module("myApp",[]); m1.controller("Aaa",["$scope", function ($scope) { $scope.regText = { regVal : 'default', regList : [ { name : 'default' , tips : '請輸入用戶名'}, { name : 'required' , tips : '用戶名不能為空'}, { name : 'pattern' , tips : '用戶名必須是字母'}, { name : 'pass' , tips : '√'} ] }; $scope.regPassword = { regVal : 'default', regList : [ { name : 'default' , tips : '請輸入密碼'}, { name : 'required' , tips : '密碼不能為空'}, { name : 'minlength' , tips : '密碼至少6位'}, { name : 'pass' , tips : '√'} ] }; $scope.change=function(reg,err){ for(var attr in err){ if(err[attr]==true){ $scope[reg].regVal=attr; return; } } $scope[reg].regVal="pass"; } }]); </script> </body> </html>
1.模塊module
模塊這東西的好處我還沒有體會出來，可能是因為做的東西代碼量還太小。它的功能基本上是講代碼按照功能分成若干塊，這樣就可以有效地防止controller的混亂(在我看來就是再來一級分類管理)。
具體代碼就是
html中
<html lang="en" ng-app="myApp">
其中"myApp"就是這個模塊的名字
對應的js代碼
var m1=angular.module("myApp",[]);
其中，第二個參數是這個模塊需要依賴的模塊。
當然，controller的寫法也要變一變了，至少你得告訴程序你這個controller是寫在哪個模塊里的吧。
m1.controller("Aaa",["$scope",function($scope){
//code
}]);
其中$scope是注入的服務
2.表單相關
表單驗證相關操作其實大部分是在標簽內寫的
<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">
這幾個api是啥意思就不仔細說了，反正意思就是一些字符串驗證的規則，想要通過就必須符合這些規則。當然，如果你只想告訴用戶通不通過而不想寫那么多原因的話大可以一個正則搞定。重點是：通不過會發生什么？ 很簡單，通不過的話ng-model對應的變量值就是 undefined。另外一個值得注意的問題是何時觸發驗證，改變驗證提示（提示內容還是需要寫邏輯的）。有一類是像百度搜索提示那樣，輸入內容改變一下就觸發一次，但是實際上對於表單驗證來說這樣做並不合適，因為1.其實你只需要在用戶覺得輸入完了驗證,這樣做會增加不少不必要的代碼運行2.如果你設置了類似於字段長度之類的限制，在輸入到一半的時候可能跳出來”長度不夠”之類的。要是我遇到這種表單驗證，心里肯定會默默罵一句：我tm還沒敲完呢。所以在input標簽失去焦點的時候進行驗證還是不錯的，因為這時基本上可以代表用戶覺得我輸入完了。實際不早也不晚。
3.ng-repeat和filter
<span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span>
ng-repeat在我看來就是根據數據長度來自定義html結構的 常用在<li> <table>之類的數據展示情景中。寫起來有點像for in循環
比如上面的例子,在不考慮filter的情況下，span標簽的數量就是regPassword.regList中的元素個數，這個用來遍歷的對象可以是數組或者對象。
filter的作用就是在它們當中篩選出需要的字符串，當然還有其他的過濾器，自己看看就明白了，都是api。filter的意思是篩選出符合regPassword.regVal的re。嗯，當然后面寫個true的話就變成了不是包含而是必須完全匹配。
這一部分相對簡單，所以能省則省。下一步寫關於angular非常重要的一部分，路由(ng-route)。