什麼是 AngularJS？ AngularJS簡介_AngularJS
- WBOY原創
- 2016-05-16 16:28:441264瀏覽
什麼是 AngularJS?
AngularJS 是一個為動態WEB應用設計的結構架構。它能讓你使用HTML作為模板語言，透過擴充HTML的語法，讓你能更清楚、簡潔地建構你的應用元件。它的創新點在於，利用 資料綁定 和 依賴注入，它使你不用再寫大量的程式碼了。這些都是透過瀏覽器端的Javascript實現，這也使得它能夠完美地和任何伺服器端技術結合。
AngularJS是為了克服HTML在建造應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言，但要建立WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。 formatDate
通常，我們是透過以下技術來解決靜態網頁技術在建構動態應用上的不足：
1.類別庫 - 類別庫是一些函數的集合，它能幫助你寫WEB應用程式。起主導作用的是你的程式碼，由你來決定何時使用類別庫。類別庫有：jQuery等
2.框架 - 框架是一種特殊的、已經實現了的WEB應用，你只需要對它填充具體的業務邏輯。這裡框架是起主導作用的，由它來根據具體的應用邏輯來呼叫你的程式碼。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它嘗試去補足HTML本身在建構應用上的缺陷。 AngularJS透過使用我們稱為識別碼(directives)的結構，讓瀏覽器能夠識別新的語法。例如：
1.使用雙大括號{{}}語法進行資料綁定；
2.使用DOM控制結構來實現迭代或隱藏DOM片段；
3.支援表單和表單的驗證；
4.能將邏輯代碼關聯到相關的DOM元素上；
5.能將HTML分組成可重複使用的元件。
端對端的解
AngularJS試圖成為成為WEB應用中的一種端對端的解決方案。這意味著它不只是你的WEB應用中的一個小部分，而是一個完整的端對端的解決方案。這會讓AngularJS在建構一個CRUD（增加Create、查詢Retrieve、更新Update、刪除Delete）的應用時顯得很「固執」（原文為 opinionated,意指沒有太多的其他方式）。但是，儘管它很“固執”，它仍然能確保它的“固執”只是在你構建應用的起點，並且你仍然可以靈活變動。 AngularJS的一些出眾之處如下：
1.建構一個CRUD應用程式可能用到的全部內容包括：資料綁定、基本範本識別碼、表單驗證、路由、深度連結、元件重複使用、依賴注入。
2.測試方麵包括：單元測試、端對端測試、模擬和自動化測試框架。
3.具有目錄佈局和測試腳本的種子應用作為起點。
AngularJS的可愛之處
AngularJS透過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣，這也會損失一部分彈性。換句話說，並不是所有的應用都適合用AngularJS來做。 AngularJS主要考慮的是建構CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。
如遊戲，圖形介面編輯器，這種DOM操作很頻繁也很複雜的應用，和CRUD應用就有很大的不同，它們不適合用AngularJS來構建。像這種情況用一些更輕、簡單的技術如jQuery可能會更好。
一個簡單的AngularJS實例
下面是一個包含了一個表單的典型CRUD應用。表單值先經過驗證，然後用來計算總值，這個總值會被格式化成本地的樣式。以下有一些開發者常見的概念，你要先了解：
1.將資料模型(data-model)關聯到視圖(UI)上；
2.寫入、讀取、驗證使用者的輸入；
3.根據模型計算新的值；
4.將輸出格式本地化。
index.html:
頭>
發票：
表>
總計： {{數量 * 花費 |幣幣}}
身體>
script.js:
函數 InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
端對端檢定：
it('應該顯示角度綁定', function() {
Expect(綁定('數量 * 成本')).toEqual('$19.95');
input('數量').enter('2');
input('cost').enter('5.00');
Expect(綁定('數量 * 成本')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}
運作效果：
發票：
數量成本
總計：{{數量 * 成本 |貨幣}}
試試看上面這個例子，然後我們一起看下這個例子的工作原理。在``標籤裡，我們用一個`ng-app`識別碼標明這是一個AngularJS應用。這個`ng-app`標識符使 AngularJS**自動初始化**(自動初始化)你的應用。我們用``標籤來載入AngularJS 腳本：
數量：
成本：
這個輸入框的widget看起來很普通，但如果認識到以下幾點那它就不普通了：
1.當頁面載入完後，AngularJS會依照widget裡的宣告的模型名字（qty、cost）產生同名變數。你可以把這些變數認為是MVC設計模式中的M(Model)；
2.注意上面widget裡的input有著特殊的能力。如果你們沒有輸入資料或輸入的資料無效，這個input輸入框會自動變紅。輸入框的這個新特性，能讓開發者更容易實現CRUD應用程式中常見的欄位驗證功能。
終於，我們可以來看神祕的雙大括號{{}}了:
Total: {{qty * cost | currency}}
這個{{表達式}}標記是AngularJS的資料綁定。其中的表達式可以是表達式和過濾器({{ expression | filter }})的組合。 AngularJS提供了過濾器來對輸入輸出資料格式化。
上面的這個例子裡，{{}}裡的表達式讓AngularJS把從輸入框中獲得的資料相乘，然後把相乘結果格式化成本地貨幣樣式，然後輸出到頁面上。
值得一提的是，我們既沒有呼叫任何AngularJS的方法，也沒有像用框架一樣去寫某個具體邏輯，就是完成了上述函數。這個實作背後的是因為瀏覽器做了比以往產生 靜態頁面更多的工作，讓它能滿足動態WEB應用的需求。 AngularJS使得動態WEB應用的開發門檻降到不需要類別函式庫或框架的程度。
AngularJS的「禪道(理念)」
Angular信奉的是，當組成視圖(UI)同時又要寫軟體邏輯時，聲明式的程式碼會比命令式的程式碼好得多，儘管命令式的程式碼非常適合用來表述業務邏輯。
1.將DOM操作和應用邏輯解耦是一種非常好的思路，它能大大改善程式碼的可調性；
2.將 測試 和 開發 同等看待是一種非常非常好的思路，測試的難度在很大程度上取決於程式碼的結構；
3.將客戶端和伺服器端解耦是一種特別好的做法，它能讓兩邊並行開發，並且使兩邊程式碼都能實現重複使用；
4.如果框架能夠在整個開發流程中引導著開發者：從設計UI，到編寫業務邏輯，再到測試，那對開發者將是極大的幫助；
5.「化繁為簡，化簡為零」總是好的。
AngularJS能將你從以下的惡夢中解脫出來：
1.使用回呼： 回呼的使用會打亂你的程式碼的可讀性，讓你的程式碼變得支離破碎，很難看清原本的業務邏輯。移除一些常見的程式碼，例如回調，是件好事。大幅減少你因為JavaScript這門語言的設計而不得不寫的程式碼，能讓你把自己應用的邏輯看得更清楚。
2.手動編寫操作DOM元素的程式碼：操作DOM是AJAX應用很基礎的一部分，但它也總是很「笨重」且容易出錯。用聲明的方式描述的UI介面可隨著應用程式狀態的改變而變化，能讓你從寫出低階的DOM操作程式碼中解脫出來。絕大部分用AngularJS寫的應用程式裡，開發者都不用再自己去寫操作DOM的程式碼，不過如果你想的話還是可以去寫。
3.對UI介面讀寫資料： AJAX應用程式的很大一部是CRUD操作。一個經典的流程是把服務端的資料組成內部對象，再把對象編成HTML表單，用戶修改表單後再驗證表單，如果有錯再顯示錯誤，然後將資料重新組成內部對象，再回傳給伺服器。這個流程裡有太多太多要重複寫的程式碼，使得程式碼看起來總是在描述應用程式的全部執行流程，而不是具體的業務邏輯和業務細節。
4.開始前得寫大量的基礎性的程式碼： 通常你需要寫很多的基礎性的程式碼才能實現一個「Hello World」的應用。用AngularJS的話，它會提供一些服務讓你很容易地正式開始寫你的應用，而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是，你還能全盤掌握自動化測試的初始化過程。