簡談AngularJS在下一代Web開發(fā)中的應(yīng)用

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

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

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

1 引言（Introduction）

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

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

AngularJS）

2.1 AngularJS與瀏覽器的交互

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

（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指令對scope里面的變量進(jìn)行賦值；

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

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

2.2 AngularJS與用戶的交互

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

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

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

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

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

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

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

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

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

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

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

Satellizer是一個端到端的基于token的AngularJS認(rèn)證模塊，Satellizer支持Google、Facebook、LinkedIn和Twitter認(rèn)證體系，并且也提供郵箱和密碼的登錄方式，另外Satellizer支持OAuth 1.0和2.0規(guī)范，所以你可以更加靈活地擴(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實時、多用戶應(yīng)用模塊——GoAngular

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

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

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

（6）AngularJS的國際化模塊——angular-translate

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

4 結(jié)論（Conclusion）

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

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

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

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

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

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

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

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

作者簡介：

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