摘 要：隨著互聯(lián)網(wǎng)開(kāi)發(fā)技術(shù)的迅猛發(fā)展，Web開(kāi)發(fā)技術(shù)為了能夠適應(yīng)這一行業(yè)發(fā)展的需要，在技術(shù)上不斷的推陳出新，作為Web開(kāi)發(fā)中比較重要的一個(gè)環(huán)節(jié)——瀏覽器端的開(kāi)發(fā)技術(shù)一直是行業(yè)內(nèi)熱議的焦點(diǎn)，AngularJS技術(shù)的日漸成熟，可能將會(huì)引領(lǐng)Web開(kāi)發(fā)技術(shù)走向一個(gè)新的階段。

關(guān)鍵詞：AngularJS；Web開(kāi)發(fā)；瀏覽器端技術(shù)

中圖分類號(hào)：TP31 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

AngularJS作為瀏覽器端的解決技術(shù)，主要是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。在瀏覽器端的技術(shù)中，在靜態(tài)網(wǎng)頁(yè)的解決方案中，我們通常使用HTML。它是一種聲明式標(biāo)簽語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話HTML標(biāo)簽語(yǔ)言就顯得乏力了。所以我們需要一種能夠兼容HTML的技術(shù)，用來(lái)解決瀏覽器端實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的問(wèn)題。

2 AngularJS的工作原理（The working principle of

AngularJS）

2.1 AngularJS與瀏覽器的交互

當(dāng)我們用瀏覽器去訪問(wèn)帶有AngularJS的html腳本的時(shí)候，瀏覽器依次做了如下一些事情：

（1）首先進(jìn)行html加載，然后將其解析成為DOM；

（2）在瀏覽器中加載angular.js的腳本；

（3）AngularJS等待DOMContentLoaded事件的觸發(fā)；

（4）AngularJS尋找ng-app指令，該指令將起到確定應(yīng)用程序的邊界的作用；

（5）配置$injector，該配置使用ng-app中指定的模塊；

（6）使用injector創(chuàng)建$rootScope服務(wù)和compile；

（7）使用compile服務(wù)編譯DOM并把它鏈接到rootScope上；

（8）ng-init指令對(duì)scope里面的變量進(jìn)行賦值；

（9）對(duì)表達(dá)式{{變量}}進(jìn)行替換。

AngularJS與瀏覽器的整個(gè)交互流程如圖1所示。

2.2 AngularJS與用戶的交互

在理解了AngularJS與瀏覽器的交互流程以后，我們接下來(lái)要了解的就是它是如何跟用戶來(lái)交互的。整體來(lái)說(shuō)，主要分為以下三個(gè)階段。

（1）瀏覽器的事件回路一直處于等待事件觸發(fā)的狀態(tài)，這里面的事件包括用戶的交互操作、定時(shí)事件或者網(wǎng)絡(luò)事件。

（2）一旦有事件觸發(fā)瀏覽器的事件回路，就會(huì)進(jìn)入到Javascript的context中，這個(gè)過(guò)程中一般使用回調(diào)函數(shù)來(lái)修改DOM。

（3）當(dāng)回調(diào)函數(shù)執(zhí)行完成以后，瀏覽器會(huì)根據(jù)新的DOM來(lái)組織渲染新的瀏覽器頁(yè)面。

AngularJS與用戶的交互循環(huán)過(guò)程如圖2所示。

3 AngularJS的應(yīng)用（The application of AngularJS）

3.1 AngularJS在大型Web開(kāi)發(fā)中的應(yīng)用

AngularJS是一種非常適合編寫大型應(yīng)用的JS框架。我們可以直接拿來(lái)使用，它的開(kāi)發(fā)周期很快，而且它會(huì)對(duì)組織應(yīng)用的結(jié)構(gòu)很有幫助。AngularJS作為JavaScript框架，對(duì)模型層的完全掌控是它的獨(dú)到之處。而與此同時(shí)AngularJS也是強(qiáng)大的，因?yàn)閼?yīng)用程序的核心就是我們的數(shù)據(jù)，而各種應(yīng)用之間的數(shù)據(jù)又有很大區(qū)別。AngularJS可以對(duì)這些不同的、區(qū)別很大的數(shù)據(jù)進(jìn)行整合，甚至于會(huì)用于數(shù)據(jù)的存儲(chǔ)。

動(dòng)態(tài)Web應(yīng)用設(shè)計(jì)是一個(gè)能讓我們使用HTML作為模板的語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓我們能更清楚、簡(jiǎn)潔地構(gòu)建我們的應(yīng)用組件。它的創(chuàng)新點(diǎn)在于，利用依賴注入和數(shù)據(jù)綁定，可以使我們?cè)匍_(kāi)發(fā)過(guò)程中不再寫大量的冗余代碼。

3.2 AngularJS的擴(kuò)展應(yīng)用

（1）AngularJS認(rèn)證模塊——Satellizer

Satellizer是一個(gè)端到端的基于token的AngularJS認(rèn)證模塊，Satellizer支持Google、Facebook、LinkedIn和Twitter認(rèn)證體系，并且也提供郵箱和密碼的登錄方式，另外Satellizer支持OAuth 1.0和2.0規(guī)范，所以你可以更加靈活地?cái)U(kuò)展認(rèn)證方法。

（2）AngularJS的UI擴(kuò)展模塊——AngularUI

AngularUI為AngularJS提供了很多UI增強(qiáng)效果，并且提供了IE、jQuery兼容，以及一些常用UI組件。

（3）Bootstrap集成AngularJS模塊——AngularStrap

AngularStrap可以非常完美地將Bootstra集成到AngularJS中，AngularStrap包含大部分支持AngularJS指令，所以并不需要依賴其他的樣式和腳本。

（4）AngularStrap實(shí)時(shí)、多用戶應(yīng)用模塊——GoAngular

GoAngular可讓你輕松使用AngularJS和GoInstant構(gòu)建實(shí)時(shí)、多用戶的應(yīng)用程序。

（5）AngularJS的UI組件——adapt-strap

adapt-strap是AngularJS UI組件和實(shí)用工具，是基于AngularJS1.2+和bootstrap3的。

（6）AngularJS的國(guó)際化模塊——angular-translate

angular-translate是一個(gè)AngularJS的模塊，用于簡(jiǎn)化i18n和l10n應(yīng)用的便攜，實(shí)現(xiàn)了延遲加載和多元化。

4 結(jié)論（Conclusion）

從目前的現(xiàn)實(shí)情況來(lái)看，AngularJS贏得了前端框架的戰(zhàn)爭(zhēng)。這并不是說(shuō)沒(méi)有更大更高品質(zhì)的替代品可以替代，但很少有框架獲得了這么多開(kāi)發(fā)者包括緩慢媒體和保守公司的一致看好。對(duì)于個(gè)人開(kāi)發(fā)者而言，這意味著在AngularJS上的投資是一個(gè)安全的賭注，這在未來(lái)十年將獲得豐厚的回報(bào)。對(duì)于創(chuàng)業(yè)者來(lái)說(shuō)，意味著建立一個(gè)幫助AngularJS開(kāi)發(fā)者的公司和團(tuán)隊(duì)，因此可以產(chǎn)生一些非常巨大的回報(bào)。從以上對(duì)AngularJS技術(shù)的分析來(lái)看，它的良好的兼容性以及對(duì)前沿技術(shù)的支持性，必將使該項(xiàng)技術(shù)成為下一代Web開(kāi)發(fā)中的一項(xiàng)重要技術(shù)。

參考文獻(xiàn)（References）

[1] 曹劉洋.編寫高質(zhì)量代碼：Web開(kāi)發(fā)前端修煉之道[M].北京：

機(jī)械工業(yè)出版社，2010.

[2] 鄧小善，龍艷軍.高訪問(wèn)量網(wǎng)站性能檢測(cè)與優(yōu)化的設(shè)計(jì)與實(shí)現(xiàn)

[J].現(xiàn)代計(jì)算機(jī)：專業(yè)版，2009（2）：25-26.

[3] 李強(qiáng)，楊巋，吳天吉.基于ASP.net的網(wǎng)站開(kāi)發(fā)前端技術(shù)優(yōu)化研

究[J].軟件導(dǎo)刊，2013，12（5）：107-108.

作者簡(jiǎn)介：

董英茹（1979-），女，碩士，講師.研究領(lǐng)域：軟件項(xiàng)目管理.