借助AngularJS寫優雅的代碼
接觸AngularJS還真有點碰巧，在用JQuery寫數據綁定的時候，我被數據對象和DOM之間的同步整煩了，要寫一大堆方法綁定和取值/設值的代碼邏輯，丑得要死。簡單說來，就是：
- 數據對象發生變更以后，要及時更新DOM樹；
- 用戶操作改變DOM樹以后，要回頭更新數據對象
這個問題還是舉例來說清楚一些，比如我定義了這樣一個queryObj：
- {name: "sally", price: 30}
現在有這樣的DOM對象：
- <input type="text" value="sally" />
- <label>sally</label>
1、queryObj發生變化的時候，這兩個DOM對象要及時更新，一個是value需要更新，一個則是標簽里面的文本需要更新。
我就得寫這樣的JQuery設值語句：
- $("input").val(queryObj.name);
- $("label").text(queryObj.name);
2、當用戶操作改變input里面的值的時候，我也需要同步更新label里面的值，以及queryObj里面的值：
- $("input").keydown(function(){
- var data = $(this).val();
- $("label").text(data);
- queryObj.name = data;
- });
可以想象在DOM對象很多的時候，這種綁定語句和設值語句惡心得令人發指。
就這個問題，第1條對象的變更需要及時刷新到DOM上，有好多辦法，underscore.js、mustache之類的，模板+數據綁定嘛，當 然，需要手動調用來更新；但是反過來的第2條，DOM變更需要及時刷新到其它DOM對象上，也要刷回數據對象，我找了一會兒，也沒有看見有什么現成的實 現，正火大地準備自己寫一個簡單的機制，這時Google到了AngularJS的“two way binding”，哈哈，暗爽，這不正是我想要的東西么？
鑒于這不是AngularJS的教程。在此我假設你有AngularJS的基礎知識，否則，建議你先閱讀AngularJS簡單易懂的教程。
雙向綁定
不管是MVC還是MVVM，數據綁定的過程總是惹人厭煩的，這樣的事情做得越少越好；如果需要數據綁定的逆過程，這樣的問題是現有MVC框架所很少考慮到的。AngularJS不但把雙向綁定的事情替我做了，而且也避免了特定視圖類的定義，直接使用原始的數據對象就好。
還是就上面這個問題，在寫HTML標簽的時候，增加ng-app和一個ng-controller的屬性，至于占位符，和普通的模板機制沒有什么區別：
- <div ng-app ng-controller="QueryController">
- <input type="text" value="{{queryObj.name}}" />
- <label>{{queryObj.name}}</label>
- </div>
并且定義一個和ng-controller同名的方法，參數名為$scope：
- function QueryController($scope) {
- $scope.queryObj = {name : "sally", price : 30};
- }
完畢了，這以后label、input和$scope.queryObj這三者就同步了，DOM變化的時候，其它二者也會被及時更新。這就是AngularJS的雙向綁定。我覺得這大概是AngularJS最精華的部分。
AngularJS官網的教程上，還給了這樣的說明：
從上面的例子，控制器、模板、數據模型、視圖，這幾個概念和之間的關系應該已經明晰了。
AngularJS遵循的設計理念，是構建UI應當用聲明式的方式來（什么是聲明式編程，請參閱我關于編程范型的文章）。值得一提的是，AngularJS引入的directive確實方便擴展了標簽集，可以寫出DSL樣子的代碼，非常非常靈活，比如：
- <Alert>
- <p>Error occurs.</p>
- </Alert>
這其中的Alert就是通過directive實現的自定義的標簽，最終可以被解析成具備“警告”樣式的html，但是，在對于directive的定義上面，就連官網的例子都是，生寫html片段模板代碼字符串的，用起來確實讓我不夠舒服。
依賴注入
依賴注入（Dependency Injection，DI）對于使用過Spring的程序員來說實在是再熟悉不過了，所謂依賴注入，就是把某個過程中注入值的步驟交給外部框架、容器來完成。舉例來說，這樣的代碼：
- function PhoneListCtrl($scope, $http) {
- $http.get('phones/phones.json').success(function(data) {
- $scope.phones = data;
- });
- $scope.orderProp = 'age';
- }
$scope、$http都是需要AngularJS框架傳入的服務變量，在此，參數的名字不可隨意修改，因為AngularJS是根據它來判定需要依賴注入的。
服務可以自己定義，再利用依賴注入的方式加進來使用，這對于模塊化和重用是很有幫助的。
過濾器
AngularJS的表達式功能比較弱，不支持條件判斷和流程控制，不過好在支持過濾器，這就一定程度上彌補了這個缺憾。過濾器是個很有趣的特 性，讓人想起了管道編程。到這里，開個玩笑，你大概也發現AngularJS真是一個到處抄襲，哦不，是借鑒各種概念和范型的東西，比如依賴注入抄 Spring，標簽定義抄Flex，過濾器抄Linux的管道：
- {{ "lower cap string" | uppercase }}
- {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
既然是管道編程，那么肯定支持迭代地使用管道：
- <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
事件處理
解耦一定是相對的，在我們使用各種綁定語句把onClick="javascript:xxx"從DOM上拿掉的時候，我們就已經想到，總有一天，寫那些DOM事件綁定的語句寫煩了，一定還會拿回來：
- <img ng-src="{{img}}" ng-click="setImage(img)">
相應地，定義setImage：
- $scope.setImage = function(imageUrl) {
- $scope.mainImageUrl = imageUrl;
- }
無論是把這個綁定關系拿走還是拿回來，都是有道理的，選擇你最傾心的方式。就我而言，我傾向于把同一模塊的代碼放置在一起，增加可理解性，而不在乎它的組成是DOM聲明還是JavaScript解釋。
另外，值得一提的是不同controller之間的通信方式，AngularJS推薦的方式是采用事件，具體說，controller是可以嵌套 的，$broadcast會把事件廣播給所有子controller，而$emit則會將事件冒泡傳遞給父controller，$on則是 AngularJS的事件注冊函數：
- $scope.$on("DataChange", function (event, msg) {
- $scope.$broadcast("DataChange", msg);
- });
但是，這讓我頗為不爽，如果我的兩個視圖在不同的controller內，我還非得要通過事件機制來保持同步的話，如此啰嗦，我還需要AngularJS干嘛？
吐槽歸吐槽，AngularJS還是非常值得學習使用的，尤其是其中的雙向綁定，用起來真是太爽了。***附加幾個有用的鏈接：
