在這裡我整理了一下 AngularJS 中常用到的指令，包含它們的書寫格式及指令的用法，功能。不過這裡的整理有些不完整，不過在後面的使用過程中會逐步的去完善，裡面有些知識點是摘錄自網路上的，但是我都去除錯檢驗程式碼的可行性，加以自己的理解去整理，有些部分加上了自己的理解。

第一 迭代輸出之ng-repeat標籤
ng-repeat讓table ul ol等標籤和js裡的陣列完美結合

1. <ul>
2. <ling-repeat="person in persons">
3.         {{person.name}} is {{person.age}} years old.
4. </li>
5. </ul>

你甚至可以指定輸出的順序：

1. <ling-repeat="person in persons | orderBy:'name'">

第二 動態繫結之ng-model標籤
任何有使用者輸入，只要是有值的html標籤，都可以動態繫結js中的變數，
而且是動態繫結。

1. <inputtype="text"ng-model='password'>

對於繫結的變數，你可以使用{{}} 直接引用

1. <span>you input password is {{password}}</span>

如果你熟悉fiter，你可以很容易的按你的需要格式輸出

1. <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

第三 繫結點選事件之ng-click事件
使用ng-click你可以很容易的為一個標籤繫結點選事件。

1. <buttonng-click="pressMe()"/>

當然前提是你要在$scope域中定義的自己的pressMe方法。
和傳統的onclick方法不同，你甚至可以為ng-click方法傳遞一個物件，就像這樣：

1. <ul>
2. <ling-repeat="person in persons">
3. <buttonng-click
   ="printf(person)"/>
4. </li>
5. </ul>

當然還有ng-dblclick標籤

第四 分支語句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled標籤
分支語句讓你在介面上都可以寫邏輯判斷。

1. <ul>
2. <ling-repeat="person in persons">
3. <!-- ng-switch 多個選項時的應用 -->
4. <spanng-switchon="person.sex">
5. <spanng-switch-when="1">you are a boy</span>
6. <spanng-switch-when="2">you are a girl</span>
7. </span>
8. <!-- ng-if 判斷條件成立時顯示，包含本身 span 標籤，如果不成立則連本身都不顯示 -->
9. <spanng-if="person.sex==1">you may be a father</span>
10. <!-- ng-show 判斷條件成立時顯示，不包含本身 span 標籤 -->
11. <spanng-show="person.sex==2">you may be a mother</span>
12. <span>
13.             please input your baby's name:<inputtype="text"ng-disabled="!person.hasBaby"/>
14. </span>
15. </li>
16. </ul>

第五 校驗語法之 ng-trim ng-minlength ng-maxlength required ng-pattern 等標籤
這塊在實踐練習，發現之前記錄太簡單，而這部分涉及到的內容比較豐富，所以要另起一篇日記來記錄，請點《AngularJS 自帶表單驗證的使用》來檢視

第六 下拉框之 ng-options 標籤
ng-options是為下拉框專門打造的標籤。

1. <selectng-model="yourSelected"ng-options="person.id as person.name in persons"></select>

下拉框中顯示的是person.name，當你選中其中一個的時候，你可以通過yourSelected得到你選中的person.id.

第七 控制css之 ng-style 標籤
ng-style幫你輕鬆控制你的css屬性

1. <spanng-style="myColor">your color</span>

你可以通過給myColor賦值的形式來改變你想要的效果，就像這樣：
$scope.myColor={color:’blue’};
$scope.myColor={cursor: ‘pointer’,color:’blue’};

第八 非同步請求之 $http 物件。
AngularJS 提供了一個類似jquery的$.ajax的物件，用於非同步請求。
在AngularJS中對非同步操作是推崇至極的，所以$http的操作都是非同步的不像jquery.ajax裡還提供了async引數。

1.  $http({method :'POST',params:{ id:123}, data:{name:'john',age:27}, url :"/mypath"})
2. .success(function(response, status, headers, config){
3. //do anything what you want;
4. })
5. .error(function(response, status, headers, config){
6. //do  anything what you want;
7. });

如果你是POST請求，params裡的資料會幫你拼到url後面，data裡的資料會放到請求體中。