將DOM操作和應用邏輯解耦是一種非常好的思路，它能大大改善代碼的可調性；
將測試和開發同等看待是一種非常非常好的思路，測試的難度在很大程度上取決於代碼的結構；
將用戶端和伺服器端解耦是一種特別好的做法，它能使兩邊並行開發，並且使兩邊代碼都能實現重用；
如果架構能夠在整個開發流程裡都引導著開發人員：從設計UI，到編寫商務邏輯，再到測試，那對開發人員將是極大的協助；
“化繁為簡，化簡為零”總是好的。
AngularJS能將你從以下的噩夢中解脫出來：
使用回調：回調的使用會打亂你的代碼的可讀性，讓你的代碼變得支離破碎，很難看清本來的商務邏輯。移除一些常見的代碼，例如回調，是件好事。大幅度地減少你因為JavaScript這門語言的設計而不得不寫的代碼，能讓你把自己應用的邏輯看得更清楚。
手動編寫操作DOM元素的代碼：操作DOM是AJAX應用很基礎的一部分，但它也總是很“笨重”並且容易出錯。用聲明的方式描述的UI介面可隨著應用狀態的改變而變化，能讓你從編寫低級的DOM作業碼中解脫出來。絕大部分用AngularJS寫的應用裡，開發人員都不用再自己去寫操作DOM的代碼，不過如果你想的話還是可以去寫。
對UI介面讀寫資料：AJAX應用的很大一部是CRUD操作。一個經典的流程是把服務端的資料群組建成內部對象，再把對象編成HTML表單，使用者修改表單後再驗證表單，如果有錯再顯示錯誤，然後將資料重新組建成內部對象，再返回給伺服器。這個流程裡有太多太多要重複寫的代碼，使得代碼看起來總是在描述應用的全部執行流程，而不是具體的商務邏輯和業務細節。
前得寫大量的基礎性的代碼：通常你需要寫很多的基礎性的代碼才能實現一個“Hello World”的應用。用AngularJS的話，它會提供一些服務讓你很容易地正式開始寫你的應用，而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是，你還能全盤掌握自動化測試的初始化過程。
執行個體
下面是一個包含了一個表單的典型CRUD應用。表單值先經過驗證，然後用來計算總值，這個總值會被格式化成本地的樣式。下面有一些開發人員常見的概念，你需要先瞭解一下：
1.將資料模型(data-model)關聯到視圖(UI)上；
2.寫、讀、驗證使用者的輸入；
3.根據模型計算新的值；
4.將輸出格式本地化。
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
script.js:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
試一下上面這個例子，然後我們一起來看下這個例子的工作原理。
在<html>標籤裡, 我們用一個ng-app標識符標明這是一個AngularJS應用。這個ng-app標識符會使AngularJS自動初始化(auto initialize)你的應用。
我們用<script>標籤來載入AngularJS指令碼：
<scriptsrc="angular-1.1.0.min.js"></script>通過設定<input>標籤裡的ng-model屬性, AngularJS會自動對資料進行雙向繫結。我們還同時進行了一些簡單的資料驗證：
Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >這個輸入框的widget看起來很普通，但如果認識到以下幾點那它就不普通了：
當頁面載入完後，AngularJS會依照widget裡的聲明的模型名字（qty、cost）產生同名變數。你可以把這些變數認為是MVC設計模式中的M(Model)；
注意上面widget裡的input有著特殊的能力。如果你們沒有輸入資料或者輸入的資料無效，這個input輸入框會自動變紅。輸入框的這種新特性，能讓開發人員更容易實現CRUD應用裡常見的欄位驗證功能。
終於，我們可以來看一下神秘的雙大括弧{{}}了:
Total:{{qty *cost |currency}}這個{{運算式}}標記是AngularJS的資料繫結。其中的運算式可以是運算式和過濾器({{ expression | filter }})的組合。AngularJS提供了過濾器來對輸入輸出資料格式化。
上面的這個例子裡，{{}}裡的運算式讓AngularJS把從輸入框中獲得的資料相乘，然後把相乘結果格式化成本地貨幣樣式，然後輸出到頁面上。
值得一提的是，我們既沒有調用任何AngularJS的方法，也沒有像用架構一樣去編寫某個具體邏輯，就是完成了上述功能。這個實現的背後是因為瀏覽器做了比以往產生 靜態頁面更多的工作，讓它能滿足動態WEB應用的需要。AngularJS使得動態WEB應用的開發門檻降到不需要類庫或者架構的程度。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
