AangularJS入門總結二
- 雙向數據綁定：在Mode(JS)中改變數據，而這些變動立刻就會自動出現在View上，反之亦然。一方面可以做到model變化驅動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。
- $scope：是一個把view（DOM元素）連接到controller上的對象。$scope是model,它提供一個綁定到DOM元素上的“執行上下文”；
- $scope：實際就是一個JavaScript對象，controller和view都可以訪問它，可以利用它在兩者間傳遞信息；$scope 裏，既存儲數據，又存儲將要運行在view上的函數；
- $rootScope：每個anguler應用都會有一個最頂層的scope，就是$rootScope，它對應著包含含有ng-app指令屬性的那個dom元素；
- module（模板）：
<html ng-app="mainApp"> 指定angular的作用域是在<html>標簽以內部分; var mainApp= angular.module(mainApp, []);在js文件中調用angular對象的module方法來聲明一個模塊，模塊的名字和ng-app的值對應。就可以讓angular運行起來了；
- ng-controller：這個指令給DOM元素創建了一個新的$scope 對象，並將這個$scope 對象包含進外層DOM元素的$scope 對象裏。
- 所有scope都遵循原型繼承，這意味著它們都能訪問父scope們。對任何屬性和方法，如果AngularJS在當前scope上找不到，就會到父 scope上去找，如果在父scope上也沒找到，就會繼續向上找，直到$rootScope 上。如果controller是多層嵌套的，就會從最裏面一直往外找，知道最上層；有些指令屬性可以選擇性地創建一個獨立的scope，讓這個scope不繼承它的父scope們；
- Angular中的"ajax"----$http：$http 服務是AngularJS的核心服務之一，它幫助我們通過XMLHttpRequest對象或JSONP與遠程HTTP服務進行交流； (1) get方法：$http.get("url?id="+id) .success(function(data){}).error(function(){}); (2) post方法：$http.post("url",{username:$scope.username,pwd:$scope.pwd},success(function(data){}),error(function(){});
- 表達式: 表達式中不可以使用循環語句、判斷語句，事實上在模板中使用復雜的表達式也是一個不推薦的做法，這樣視圖與邏輯就混雜在一起了;
- 過濾器（filter）: (九種) Angular內置了一些過濾器：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)；
- 過濾器使用方式：自定義過濾器，這個就強大了，可以滿足任何要求的數據處理；
-
明白內置的filter的使用，以及如何定義一個filter。
filter的兩種使用方法：
1. 在模板中使用filter
我們可以直接在{{}}中使用filter，跟在表達式後面用 | 分割，語法如下：
{{ expression | filter }}
也可以多個filter連用，上一個filter的輸出將作為下一個filter的輸入：
{{ expression | filter1 | filter2 | ... }}
filter可以接收參數，參數用 : 進行分割，如下：
{{ expression | filter:argument1:argument2:... }}
除了對{{}}中的數據進行格式化，我們還可以在指令中使用filter，例如先對數組array進行過濾處理，然後再循環輸出：
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
js代碼中也可以使用過濾器，方式就是我們熟悉的依賴註入，如我要在controller中使用currency過濾器，只需將它註入到該controller中即可，
代碼如下：
app.controller(‘test‘,function($scope,currencyFilter){
$scope.num = currencyFilter(123);
}
在模板中使用{{num}}就可以直接輸出$123.00了！
在服務中使用filter也是同樣：
要在controller中使用多個filter，並不需要一個一個註入嗎，提供了一個$filter服務可以來調用所需的filter，你只需註入一個$filter就夠了；
使用方法如下：
app.controller(‘test‘,function($scope,$filter){
$scope.num = $filter(‘currency‘)(123);
$scope.date = $filter(‘date‘)(new Date());
}
自定義過濾器：
filter的自定義方式也很簡單，使用module的filter方法，返回一個函數，該函數接收輸入值，並返回處理後的結果；
例如：返回一個數組中下標為偶數的元素；
/* Controller js */
mainApp.filter("oushu",function(){
return function(Array){
var array = [];
for(var i=0;i<iArray.length;i++){
if(i%2!==0){
array.push(Array[i]);
}
}
return array;
}
});
13.指令：
模板中可以使用的東西有以下四種：
1.指令(directive)：angular提供的或者自定義的標簽和屬性，用來增強HTML表現力；
2.標記(markup)：即雙大括號{{}}，可將數據雙向綁定到HTML中；
3.過濾器(filter)：用來格式化輸出數據；
4.表單控制：用來增強表單的驗證功能。
指令的幾種使用方式如下：
作為標簽：<my-dir></my-dir>
作為屬性：<span my-dir="exp"></span>
作為註釋：<!-- directive: my-dir exp -->
作為類名：<span class="my-dir: exp;"></span>
常用的就是作為標簽和屬性；
樣式相關的指令：
ng-class: 給元素綁定類名；
表達式的返回值可以是類名字符串，用空格分割多個類名；
類名數組，數組中的每一項都會層疊起來生效；
一個名值對應的json對象，其鍵值為類名值為boolean類型，當值為true時，該類會被加在元素上。
ng-class-odd ng-class-even 用來配合 ng-repeat分別在奇數列和偶數列使用對應的類。這個用來在表格中實現隔行換色再方便不過了。
ng-style：用來綁定元素的css樣式；
ng-show ng-hide: 元素顯隱控制，ng-show和ng-hide的值為boolean類型的表達式，當值為true時，對應的show或hide生效；
表單控件功能相關指令：
ng-checked 控制radio和checkbox的選中狀態
ng-selected 控制下拉框的選中狀態
ng-disabled 控制失效狀態
ng-multiple 控制多選
ng-readonly 控制只讀狀態
以上指令的取值均為boolean類型，當值為true時相關狀態生效。
上面的這些只是單向綁定，只是從數據到模板，不能反作用於數據。要雙向綁定，還是要使用 ng-model；
事件綁定相關指令：
ng-click
ng-change
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
事件綁定指令的取值為函數，並且需要加上括號，例如：
<select ng-change=”change($event)”></select>
然後在controller中定義如下：
$scope.change = function($event){
conolse.log($event.target);
}
在模板中可以用變量$event將事件對象傳遞到controller中;
特殊的指令：
ng-src:angular框架時在DOM內容加載完成之後才開始發揮作用的，如果模板中存在<img src="{{url}}">,那麽在
頁面開始在加載angular完成之前，頁面會一直顯示一張錯誤的圖片，因為路徑還沒有被替換；為了避免這種情況，
我們使用ng-src指令，這樣在路徑被正確得到之前就不會顯示找不到圖片。
ng-href: 同上理，<a>標簽的href屬性也需要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的鏈接；
我們在模板中使用{{}}顯示數據時，在angular編譯完成之前頁面會顯示出大括號及裏面的表達式。為了避免這個，ng中有一個與{{}}等同的指令:ng-bind，
同樣用於單向綁定，在頁面剛加載的時候就不會顯示出對用戶無用的數據了。盡管這樣，{{}}那麽好用，還不能用了不成？好消息是我們依然可以使用。因為
編寫的是單頁面應用，頁面只會在加載index.html的時候出這個問題，只需在index.html中的模板中換成ng-bind就行。其他的模板是我們動態加載的，
就可以放心使用{{}}了。
自定義指令： （還沒寫）
AangularJS入門總結二