寫在前面：
因為需要開始學習ng，之前在知乎上聽大神們介紹ng的時候說這個坑如何的大，學了一陣(其實也就三天)，感覺ng做的很大很全，在合適的情境你可以完全使用ng搞定一切。這一點從諸如jqLite之類的雞肋就能看出來了。所以搞得ng很大。。
更主要的是，ng用一種和之前完全不同的思維方式去組織代碼，它就是Model-View-ViewModel(MVVM)。
這篇文章結構大概是1.MVVM和雙向綁定 2.簡單的購物金額計算的例子(轉自miaov視頻)。如有問題還請看客斧正。^_^
1.MVVM和雙向綁定
先上個圖(也是我從別的地方找的)
我對MV*這類架構模式的幾個成員還不是很分的清楚。而angular乍看起來很像模板引擎一類的東西。以往，大部分的內容都是寫在html里的，但是這樣做對於需要頻繁修改內容的頁面就帶來了一些問題:
1.每一個可能修改的部分可能都需要寫一套邏輯；同樣的，如果用戶通過頁面需要頻繁傳輸信息(事件、文字等)也會需要不少代碼。
2.以往在用jq或者js寫代碼的時候，都是以dom操作為核心的：用選擇器找到dom，然后讓它干啥。一旦html結構改變，對於那么代碼就要重寫。
而ng來講在這方面就有比較大的優勢了
（1）angular中的MVVM
MVVM的作用概括來說就是實現表現和數據分離
Model(M):數據，數組，對象，json，存儲着內容。
View(V):視圖，用戶看到的部分，用戶能操作的東西，也許這就是最開始的前端需要做的東西(html+css)
ViewModel(VM):想讓數據展示給用戶，需要一定的邏輯，這一層就是用來處理這些邏輯的。
其實遇到那些個不能寫死在頁面上的，需要js控制的的東西(比如ajax的那些個信息)，其實就有點表現和數據分離的意思了。不過angular把這件事情做得比較徹底。更重要的是它可以自動更新，而不用你去寫偵聽代碼。
MVVM中M和V不能直接通信，單向雙向都不行，而都需要VM這個中介。為什么這個中介叫VM呢？在我看來，VM本身就是M在js中的一種映射：
ng-controller對應$scope 每個標簽對應一個ng-model scope的嵌套關系很像dom樹（當然，我覺得在ng中還是多在scope上做文章，少用dom找元素）。ng的相互自動更新的兩個對象就是VM中的ng-model對應變量和V中的標簽
（2）關於雙向更新
ng-model當然可以做到雙向綁定。但是並不是所有映射都是雙向的，比如{{}}和ng-bind就只能VM到V，而ng-click等事件明顯又是只能V到VM的。
2.實例：購物金額計算
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div ng-controller="Aaa"> <p>單價:<input type="text" ng-model="price"></p> <p>數量:<input type="text" ng-model="num"></p> <p>費用：<span>{{fee()|currency:'￥' }}</span></p> <p>運費：<span>{{post|currency:'￥' }}</span></p> <p>總額：<span>{{fee()+post|currency:'￥' }}</span></p> </div> </body> <script src="angular.min.js"></script> <script> function Aaa($scope){ $scope.price=5; $scope.num=1; $scope.fee=function(){ return $scope.price*$scope.num; } $scope.$watch($scope.fee,function(newVal,oldVal){ $scope.post=(newVal>=100)?0:10; }); } </script> </html>
正如上面說的，因為input需要向VM傳輸數據，所以使用 ng-model。而span標簽中的三項只是需要VM到V就可以了，所以用了雙大括號。
其中涉及到的ng的語法啥的就不說了，$scope以后會詳細的說明。稍微提一下$watch，它在我看來類似一個事件，這個事件在指定的變量改變/方法執行的時候觸發。它可以把兩個變量(ng-model)建立起聯系。讓一個ng-model隨着另一個的變化而變化。
當然這種變化是單向的，我猜想要是兩個變量互相寫$watch的話會發生比較恐怖的事情吧，有空試一試~
第一部分到此結束，下一步會寫一個表單驗證相關的例子，里面會提到ng-repeat和filter。