單頁應用程序 (SPA)
單頁應用程式(SPA)與在網頁瀏覽器上運行的網頁應用程式非常相似,只是前者通過動態重新編寫單個頁面來與用戶互動,而不是從服務器加載整個新頁面。這種方法保留了連續頁面之間的核心用戶體驗,使得SPA看起來像是一個被限制在Web瀏覽器內部的移動應用程式。在SPA中,所有HTML、JavaScript和CSS元素都是通過一次性載入單個頁面來檢索的。
與單頁應用程式的通信重點是與幕後伺服器進行動態通信。AngularJS框架對傳統HTML進行了調整和延伸,以通過雙向數據繫結呈現動態內容,從而實現模型和視圖的自動同步。因此,AngularJS減少了純粹的DOM操作,旨在提高可測試性和展示效果。
※強弱危機分析
優勢:
- angularjs提供雙向數據綁定,使得開發者在進行前端開發時能夠更加便利。
- angularjs有著豐富的函式庫,並提供模組化的程式碼組織方式,允許開發者使用模塊來劃分和管理大型項目。
- angularjs是由google團隊進行維護和更新的專案,因此其穩定性與可靠性相當高。
劣勢:
- 學習曲線陡峭,對於新手來說可能需要花費較多時間掌握angularjs的各項功能與特性。
- 由於angularjs具有強大的功能與特性,所以其文件大小相比其他javascript框架而言是較大的。
- 雖然angualrjs被廣泛使用但在一些小型或中型項目中可能會顯得過於笨重且不必要。
機會:
- 隨著單頁面應用(spa)日益受到歡迎,作為支持spa開發的框架之一,angularjs有很大的市場空間和發展潛力。
- 隨著web技術的逐漸成熟,越來越多的企業和開發者將關注到angularjs這樣能夠提供統一性前端解決方案的框架。
- 由於google團隊持續更新並維護angularjs,因此有很大可能出現新的、更強大的功能與特性以吸引更多使用者。
威脅:
- 其他諸如react、vue等新型javascript框架的興起,可能會分散angularjs的使用者群體。
- 如果google停止支援或維護angularjs,那麼它可能會迅速失去市場份額並被取代。
- 隨著互聯網技術快速變化,任何技術都面臨被新興技術超越或取代的風險,包括angularjs。
雙向數據綁定
資料綁定是一種程式化的方式,每當模型變動時,就會更新視圖,同時也會更新模型以反映視圖的變化。換句話說,在視圖中進行的任何更改都會反映在模型中,反之亦然。HTML範本仍然在網頁瀏覽器中收集。
編譯步驟生成純粹的HTML,瀏覽器重新渲染以反映在視圖上。此步驟將重複進行以處理後續的頁面檢視。與傳統的伺服器端HTML程式設計不同,在AngularJS中,控制器和模型狀態保持在客戶端的網頁瀏覽器內部。
因此,可以在不需要與伺服器交互的情況下創建頁面。
(以上內容已重編、潤飾)
豐富的互聯網應用 (RIA)
以純粹的HTML和JavaScript開發豐富網際網路應用程式的前端開發相當複雜,因為維護性問題。單純將HTML和JavaScript混合使用無法使前端以乾淨方式進行模組化和測試。AngularJS是HTML的擴展,並添加了動態功能到靜態HTML中,以便根據「模型-視圖-控制器」範例將靜態UI描述與動態控制邏輯分離,從而實現可維護的豐富網際網路應用程式開發。
模型視圖控制器 (MVC)
模型-視圖-控制器(Model View Controller,MVC)將使用者介面分為三個部分:模型(model),其中包含數據;視圖(view),用於呈現數據;控制器(controller),作為用戶和模型之間的協調者。為了允許模型、視圖和控制器之間的通信,AngularJS依賴於作用域(scope)。作用域是應用為純JavaScript對象的命名空間。
一個AngularJS應用可以有一個根作用域對象,以及許多子作用域。
模型-視圖-視圖模型 (MVVM)
模型通過根作用域或子作用域與 ViewModel 對象進行交互,後者定期輪詢模型是否有任何變化。視圖則負責呈現 HTML 代碼,用於顯示你的程式碼。使用 routeProvider 物件可以對視圖進行路由。
明顯地,AngularJS 能夠深度連結和組織你的視圖和控制器,將它們轉換為可導航的 URL,並提供無狀態的控制器以調整和管理作用域物件。
輕鬆使用REST
RESTful操作正迅速成為從伺服器到客戶端的通訊標準。只需一行JavaScript,您就能快速與伺服器對話並取得所需的資料以與您的網頁互動。AngularJS將此轉化為簡單的JavaScript物件,作為模型(Model),遵循MVVM(模型-視圖-視圖模型)模式。
依賴注入 (DI)
一位開發者只需將相依項目傳遞給模組,AngularJS會負責一切並在應用程式需要時進行注入。要建立一個控制器,我們只需將作用域物件和其他相依項目傳遞給該模組的控制器函式。例如,若要建立一個ProductController,我們會傳遞作用域物件和計算器服務相依項目。
在AngularJS中,可以以下列三種方式傳遞依賴性,分別是:
函數參數、陣列參數和注入服務
擴展HTML
如果你觀察網站的背後(按下瀏覽器視窗上的Ctrl + U),你會發現今天的網站是無盡的< div >標籤串,缺乏語義明確性。作為開發者,你必須創建廣泛而全面的CSS類來定義每個DOM對象。Angular像XML一樣操作HTML,這給Web應用程式開發人員帶來了無窮的標籤和屬性可能性。
Angular通過其HTML編譯器和使用指令來根據新創建的語法提示動作來實現這一點。簡而言之,Angular指令是通過將新功能整合到它們中來增強html元素功能的特點。表達式就像是被大括號包圍的程式碼片段,不使用條件語句或循環。
它們只是格式化要顯示的數據。”
企業級測試
上述提到的AngularJS不需要任何附加框架或外掛程式,這同樣適用於測試。如果你已經熟悉了QUnit或Jasmine等專案,那麼學習Angular的單元測試API和Scenario Runner就不會感到困擾了。它能夠引導您盡可能接近實際生產應用程式的狀態進行質量分析。
Google工程師
Angular由全心投入且聰明的Google工程師們所建立和維護。這意味著,你不僅可以從龐大的開源社區中學到知識,還有傑出而精明的工程師專門負責解答你關於Angular的問題。
日益增長的人氣
根據JavaScript分析服務Libscore的數據顯示,AngularJS在2016年10月測試的100萬個網站中被用於沃爾夫拉姆阿爾法、NBC、沃爾格林、英特爾、Sprint、ABC新聞等公司的網站上,以及其他約12,000個網站上。目前,AngularJS是GitHub上星數最高的100個項目之一。來源:Google趨勢,Stack Overflow趨勢。
備註:由於文本內容已相當流暢易懂,因此無需進行重編或潤飾。
熱門網站
《衛報》、Netflix、PayPal、樂高、Upwork和天氣頻道的網站都是使用AngularJS建立的。當Google宣佈他們使用AngularJS開發了一款Sony PlayStation的手機應用程式時,震驚了所有人。
重修如下:
許多知名網站如《衛報》、Netflix、PayPal、樂高、Upwork和The Weather Channel都是使用AngularJS建立起來的。
然而,當Google宣佈他們利用AngularJS開發出Sony PlayStation手機應用程式時,這消息令所有人感到驚訝。
相關數據:
- 根據stack overflow的2020年度報告,angularjs在全球javascript框架中的市佔率為36.1%。 來源: stack overflow
- google trends數據顯示,自2013年起,angularjs的搜索量持續增長達到了高峰,在全球範圍內有超過40%的成長。 來源: google trends
- 在github上,angularjs已經累積了更多45,000個星星和13,000次fork,顯示出開發者對這一框架的強烈支持與關注。 來源: github
- 在indeed.com發布的工作職位中,要求有angularjs技能的職位佔比已經從2016年的25%提升至2020年底近35%,反映出企業對此技術需求日益增加。 來源: indeed.com
- npm統計數據表明,每週有超過450,000次下載量是針對於angularjs套件或相關工具。 來源: npm
留言列表
