在使用了AngularJS重構團隊內部的平台之後，一直想總結點什麼，這裡先說說學習和使用AngularJS的感受。AngularJS是一款開源的JavaScript MV*（MVW、MVVM、MVC）框架，目前由Google維護。AngularJS彌補了HTML在構建應用方面的不足，其通過使用標識符（directives）結構，來擴展Web應用中的HTML詞匯，使開發者可以使用HTML來聲明動態內容，從而使得Web開發和測試工作變得更加容易。
AngularJS的創始人Misko是這樣來描述框架誕生的歷史的：AngularJS最初是作為一個編外項目（side project），當時我想去看看是否有可能讓Web設計師（非開發者）只使用HTML標簽來創建簡單的應用程序。隨著時間的推移，AngularJS演變成了一個全面的開發框架。AngularJS的設計理念是：構建UI應該是聲明式的，這樣的靈感來自於Misko在Adobe公司從事Flex方面工作的時候。
帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
談談我個人使用的感受吧：最大的區別是對開發流程的影響，以往我想做一個Web應用，會先用純Html構造原型，所有的數據均是假數據，靜態的寫到Html文件中，然後不斷的調試CSS樣式。待頁面整體的展示讓我滿意之後，就開始Js與服務器的交互開發，並初步把頁面的假數據替換掉，綁定成Js調用Ajax的返回。然而在使用到Table / List等數據加載的時候，我通常會在Js中來構造這些Dom元素。隨著應用的龐大和復雜，我發現我在Js中構造了大量的Dom元素，下面是一個例子：
function buildPersonHtml(data){
var html = [];
data = data[0];
for(var id in data){
var count = 0;
if(data[id].length==0)
continue;
html[html.length] = '<div class="person alert alert-success">';
html[html.length] = '<span><i class="icon-user"></i> '+id+' 的任務列表：</span>';
html[html.length] = '<table class="table table-bordered">';
html[html.length] = '<thead><tr><th>時間</th><th>功能點</th><th>詳細情況</th><th>完成進度</th><th>耗時</th><th>備注</th>';
html[html.length] = '</tr></thead><tbody>';
orderSubTask(data[id]);
for(var i=0; i<data[id].length;i++){
var subtask = data[id][i];
if(subtask.progress != '100%')
count ++;
html[html.length] = '<tr>';
if(subtask.status=='end')
html[html.length] = '<td>開始: '+betterDate(subtask.createTime)+'<br/>結束: '+betterDate(subtask.endTime)+'</td>';
else
html[html.length] = '<td>開始: '+betterDate(subtask.createTime)+'</td>';
html[html.length] = '<td>'+subtask.name+'</td>';
html[html.length] = '<td>'+subtask.content.replace(new RegExp('\n','g'),'<br/>')+'</td>';
html[html.length] = '<td>'+subtask.progress+'</td>';
html[html.length] = '<td>'+subtask.time+'</td>';
html[html.length] = '<td>'+subtask.note+'</td>';
html[html.length] = '</tr>';
}
html[html.length] = '</tbody></table>';
html[html.length] = '<span ><i class="icon-tasks"></i> 已完成任務：'+ (data[id].length-count)+
' <i class="icon-tasks"></i> 當前任務數：'+count+'</span>';
html[html.length] = '</div>';
}
return html.join('');
}
隨著我構造這些Dom元素的Js代碼越來越多，我的原型Html頁面的內容也就越來越少，少到最後很可能就只有一個header一個footer和一個空的div而已，其他所有內容，都是Ajax從服務器讀取，拿到Json對象的返回之後，才開始構建Dom加載。
接下來，在使用AngularJS重構的時候，我發現頁面的原型設計好之後，基本上不需要做什麼改變，即所有的Dom元素，頁面上該看到的東西，都在你的Html中聲明出來了。僅僅看Html文件，任何人都能知道這個頁面大概有哪些元素（表單、表格等各種UI控件），然後AngularJS用ng-model的方式讓你把這些Dom元素和數據進行了一種雙向綁定，即把你的數據（Data Model）聲明到頁面中。（我覺得這一步完全有可能由Web設計師來完成）下面的代碼片段是一個例子：
<table class="table table-bordered table-hover" ng-controller="MachineCtrl">
<tr>
<th ng-click="machineKey = 'host'; reverse = !reverse" class="order-th">主機名</th>
<th ng-click="machineKey = 'address'; reverse = !reverse" class="order-th">IP地址</th>
<th>配置</th>
<th>賬號</th><th>OS</th>
<th>軟件</th>
<th>備注</th>
<th ng-click="machineKey = 'owner'; reverse = !reverse" class="order-th">使用者</th>
<th>操作</th>
</tr>
<tr ng-repeat="machine in machines | filter:query | orderBy:machineKey:reverse">
<td class="nowrap">{{machine.host}}</td>
<td class="nowrap">{{machine.address}}</td>
<td>{{machine.hardware}}</td>
<td>{{machine.name}} / {{machine.password}}</td>
<td>{{machine.os}}</td>
<td>{{machine.env}}</td>
<td>{{machine.note}}</td>
<td class="nowrap machine-owner" id="{{machine._id}}_owner">
<span>{{machine.owner}}</span>
<input type="text" class="form-control owner-input" ng-keydown="bookMachine($event, machine._id)"/>
<a class="owner-btn" ng-click="toggleOfflineBook(offline._id)"><i class="fa fa-times fg-lg"></i></a>
</td>
<td class="nowrap" ng-class="machine.status=='maintenance'?'disable':'enable'">
<span ng-click="maintainMachine(machine._id)"><i class="fa fa-cog fa-spin fa-lg"></i> 維護中...</span>
<a title="訂閱" ng-click="toggleMachineBook(machine._id)"><i class="fa fa-pencil"></i></a>
<a title="維護" ng-click="maintainMachine(machine._id)"><i class="fa fa-wrench"></i></a>
<a title="編輯" ng-click="editMachine(machine._id)"><i class="fa fa-edit"></i></a>
<a title="刪除" ng-click="deleteMachine(machine._id)"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
</table>
可以看到我把一個table與叫machines的data model做了一個雙向綁定，而實際上machines就是一個Json數組而已，���你用Js從服務端取到數據，填充了叫machines的Json數組之後，這個table就會自動更新出來，每一行展示一個machine，每一個單元格展示machine上的某個屬性。所謂的雙向綁定，即一方產生變化的時候，另外一方就會同步更新。所以如果我在Js文件中操作改變了這個machines數組對象，例如刪除了其中一個元素那麼頁面table就會自動減少一行，更新了一個元素的屬性值，table也會自動更新。就感覺像頁面的聲明model是Js中Json對象的引用一樣，當Json對象發生任何變化，頁面的model引用也會隨之改變。
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-05/102182p2.htm
