什么是 AngularJS？AngularJS簡介

更新時間：2014年12月06日 17:02:59 投稿：junjie

這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎知識,AngularJS 是一個為動態(tài)WEB應用設計的結構框架。它能讓你使用HTML作為模板語言，通過擴展HTML的語法，讓你能更清楚、簡潔地構建你的應用組件,需要的朋友可以參考下

什么是 AngularJS?

AngularJS 是一個為動態(tài)WEB應用設計的結構框架。它能讓你使用HTML作為模板語言，通過擴展HTML的語法，讓你能更清楚、簡潔地構建你的應用組件。它的創(chuàng)新點在于，利用數(shù)據(jù)綁定和依賴注入，它使你不用再寫大量的代碼了。這些全都是通過瀏覽器端的Javascript實現(xiàn)，這也使得它能夠完美地和任何服務器端技術結合。

AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態(tài)文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。formatDate

通常，我們是通過以下技術來解決靜態(tài)網(wǎng)頁技術在構建動態(tài)應用上的不足：

1.類庫 - 類庫是一些函數(shù)的集合，它能幫助你寫WEB應用。起主導作用的是你的代碼，由你來決定何時使用類庫。類庫有：jQuery等

2.框架 - 框架是一種特殊的、已經(jīng)實現(xiàn)了的WEB應用，你只需要對它填充具體的業(yè)務邏輯。這里框架是起主導作用的，由它來根據(jù)具體的應用邏輯來調用你的代碼?？蚣苡校簁nockout、sproutcore等。

AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為標識符(directives)的結構，讓瀏覽器能夠識別新的語法。例如：

1.使用雙大括號{{}}語法進行數(shù)據(jù)綁定；
2.使用DOM控制結構來實現(xiàn)迭代或者隱藏DOM片段；
3.支持表單和表單的驗證；
4.能將邏輯代碼關聯(lián)到相關的DOM元素上；
5.能將HTML分組成可重用的組件。

端對端的解決方案

AngularJS試圖成為成為WEB應用中的一種端對端的解決方案。這意味著它不只是你的WEB應用中的一個小部分，而是一個完整的端對端的解決方案。這會讓AngularJS在構建一個CRUD（增加Create、查詢Retrieve、更新Update、刪除Delete）的應用時顯得很“固執(zhí)”（原文為 opinionated,意指沒有太多的其他方式）。但是，盡管它很“固執(zhí)”，它仍然能確保它的“固執(zhí)”只是在你構建應用的起點，并且你仍能靈活變動。AngularJS的一些出眾之處如下：

1.構建一個CRUD應用可能用到的全部內(nèi)容包括：數(shù)據(jù)綁定、基本模板標識符、表單驗證、路由、深度鏈接、組件重用、依賴注入。
2.測試方面包括：單元測試、端對端測試、模擬和自動化測試框架。
3.具有目錄布局和測試腳本的種子應用作為起點。

AngularJS的可愛之處

AngularJS通過為開發(fā)者呈現(xiàn)一個更高層次的抽象來簡化應用的開發(fā)。如同其他的抽象技術一樣，這也會損失一部分靈活性。換句話說，并不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什么適合用AngularJS構建，就得了解什么不適合用AngularJS構建。

如游戲，圖形界面編輯器，這種DOM操作很頻繁也很復雜的應用，和CRUD應用就有很大的不同，它們不適合用AngularJS來構建。像這種情況用一些更輕量、簡單的技術如jQuery可能會更好。

一個簡單的AngularJS實例

下面是一個包含了一個表單的典型CRUD應用。表單值先經(jīng)過驗證，然后用來計算總值，這個總值會被格式化成本地的樣式。下面有一些開發(fā)者常見的概念，你需要先了解一下：

1.將數(shù)據(jù)模型(data-model)關聯(lián)到視圖(UI)上；
2.寫、讀、驗證用戶的輸入；
3.根據(jù)模型計算新的值；
4.將輸出格式本地化。

index.html:

復制代碼代碼如下:

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/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;

}

end-to-end test:

復制代碼代碼如下:

it('should show of angular binding', function() {

    expect(binding('qty * cost')).toEqual('$19.95');

    input('qty').enter('2');

    input('cost').enter('5.00');

    expect(binding('qty * cost')).toEqual('$10.00');

});

function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

運行效果：

復制代碼代碼如下:

Invoice:

Quantity  Cost

Total: {{qty * cost | currency}}

試一下上面這個例子，然后我們一起來看下這個例子的工作原理。在``標簽里, 我們用一個`ng-app`標識符標明這是一個AngularJS應用。這個`ng-app`標識符會使AngularJS**自動初始化**(auto initialize)你的應用。我們用``標簽來加載AngularJS腳本： <script src="http://code.angularjs.org/angular-1.1.0.min.js">
通過設置<input>標簽里的ng-model屬性, AngularJS會自動對數(shù)據(jù)進行雙向綁定。我們還同時進行了一些簡單的數(shù)據(jù)驗證：

復制代碼代碼如下:

Quantity: <input type="integer" min="0" ng-model="qty" required >

Cost: <input type="number" ng-model="cost" required >

這個輸入框的widget看起來很普通，但如果認識到以下幾點那它就不普通了：

1.當頁面加載完后，AngularJS會依照widget里的聲明的模型名字（qty、cost）生成同名變量。你可以把這些變量認為是MVC設計模式中的M(Model)；

2.注意上面widget里的input有著特殊的能力。如果你們沒有輸入數(shù)據(jù)或者輸入的數(shù)據(jù)無效，這個input輸入框會自動變紅。輸入框的這種新特性，能讓開發(fā)者更容易實現(xiàn)CRUD應用里常見的字段驗證功能。

終于，我們可以來看一下神秘的雙大括號{{}}了:

復制代碼代碼如下:

Total: {{qty * cost | currency}}

這個{{表達式}}標記是AngularJS的數(shù)據(jù)綁定。其中的表達式可以是表達式和過濾器({{ expression | filter }})的組合。AngularJS提供了過濾器來對輸入輸出數(shù)據(jù)格式化。

上面的這個例子里，{{}}里的表達式讓AngularJS把從輸入框中獲得的數(shù)據(jù)相乘，然后把相乘結果格式化成本地貨幣樣式，然后輸出到頁面上。

值得一提的是，我們既沒有調用任何AngularJS的方法，也沒有像用框架一樣去編寫某個具體邏輯，就是完成了上述功能。這個實現(xiàn)的背后是因為瀏覽器做了比以往生成靜態(tài)頁面更多的工作，讓它能滿足動態(tài)WEB應用的需要。AngularJS使得動態(tài)WEB應用的開發(fā)門檻降到不需要類庫或者框架的程度。

AngularJS的“禪道(理念)”

Angular信奉的是，當組建視圖(UI)同時又要寫軟件邏輯時，聲明式的代碼會比命令式的代碼好得多，盡管命令式的代碼非常適合用來表述業(yè)務邏輯。

1.將DOM操作和應用邏輯解耦是一種非常好的思路，它能大大改善代碼的可調性；
2.將測試和開發(fā) 同等看待是一種非常非常好的思路，測試的難度在很大程度上取決于代碼的結構；
3.將客戶端和服務器端解耦是一種特別好的做法，它能使兩邊并行開發(fā)，并且使兩邊代碼都能實現(xiàn)重用；
4.如果框架能夠在整個開發(fā)流程里都引導著開發(fā)者：從設計UI，到編寫業(yè)務邏輯，再到測試，那對開發(fā)者將是極大的幫助；
5.“化繁為簡，化簡為零”總是好的。

AngularJS能將你從以下的噩夢中解脫出來：

1.使用回調：回調的使用會打亂你的代碼的可讀性，讓你的代碼變得支離破碎，很難看清本來的業(yè)務邏輯。移除一些常見的代碼，例如回調，是件好事。大幅度地減少你因為JavaScript這門語言的設計而不得不寫的代碼，能讓你把自己應用的邏輯看得更清楚。

2.手動編寫操作DOM元素的代碼：操作DOM是AJAX應用很基礎的一部分，但它也總是很“笨重”并且容易出錯。用聲明的方式描述的UI界面可隨著應用狀態(tài)的改變而變化，能讓你從編寫低級的DOM操作代碼中解脫出來。絕大部分用AngularJS寫的應用里，開發(fā)者都不用再自己去寫操作DOM的代碼，不過如果你想的話還是可以去寫。

3.對UI界面讀寫數(shù)據(jù)： AJAX應用的很大一部是CRUD操作。一個經(jīng)典的流程是把服務端的數(shù)據(jù)組建成內(nèi)部對象，再把對象編成HTML表單，用戶修改表單后再驗證表單，如果有錯再顯示錯誤，然后將數(shù)據(jù)重新組建成內(nèi)部對象，再返回給服務器。這個流程里有太多太多要重復寫的代碼，使得代碼看起來總是在描述應用的全部執(zhí)行流程，而不是具體的業(yè)務邏輯和業(yè)務細節(jié)。

4.開始前得寫大量的基礎性的代碼：通常你需要寫很多的基礎性的代碼才能實現(xiàn)一個“Hello World”的應用。用AngularJS的話，它會提供一些服務讓你很容易地正式開始寫你的應用，而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發(fā)。特別的是，你還能全盤掌握自動化測試的初始化過程。

您可能感興趣的文章: