AngularJS - 下一個大框架

oschina發表於2014-09-09

 AngularJS

  AngularJS是web應用的下一個巨頭。

  AngularJS如果為建立web應用而設計,那它就是HTML的套路了。具有資料繫結, MVW, MVVM, MVC, 依賴注入的宣告式模板和出色的可測試性都是用純客戶端 JavaScript來實現的! AngularJS 是一個建立富客戶端應用的JavaScript MVC框架,它組織良好,經過嚴格測試,多功能,強大並且十分靈活。你仍然需要具有服務端後臺,但大多數的使用者互動邏輯將優雅地放到客戶端上處理。

  AngularJS是一個開源的web應用框架,由Google和社群進行維護,它可以建立單頁的應用程式,一個頁面的應用僅僅需要HTML,CSS和JavaScript在客戶端。它的目標是增強頁面的模型-檢視-控制(MVC)的功能,為簡化開發和測試。

  它是一個建立在厚客戶端的清爽的新模組web應用程式。一個健壯的框架建立在商業應用網路上。它鼓勵最佳實踐,開發模型和開發高質量的可維護的模組化應用程式。它的團隊是世界一流的,社群是極其出色的,它結合最棒的功能來建立web應用。

  AngularJS 允許你編寫客戶端的web應用程式,如果你有一個智慧瀏覽器。它允許你使用好用的舊式的HTML作為你的模板語言,允許你擴充套件HTML語法來清晰、簡潔的表達你的應用元件。它通過雙向資料繫結使你的UI(檢視層)與你的JavaScript物件(模型層)的資料自動同步。幫助你更好的構建你的應用和更方便的測試,AngularJs告訴瀏覽器如何依賴注入和控制反轉。它幫助改良了允許非同步回撥和延遲、使客戶端導航和深層連結使用雜湊bang格式地址和HTML5 pushStat與服務端通訊更容易。

  Angular 提供了:

  • 結構模型的引入(MVC,SPA等)

  • 增強HTML支援新特性。

  • 避免直接DOM操作來避免很難除錯不可追蹤的程式碼。

  • 包含低耦合和高可複用性

  • 應用程式內部規則測試

  • 檢視模板更接近伺服器端模板

  AngularJS 是基於宣告式程式設計模式 是使用者可以基於業務邏輯進行開發. 該框架基於HTML的內容填充並做了雙向資料繫結從而完成了自動資料同步機制. 最後, AngularJS 強化的DOM操作增強了可測試性.

  設計初衷:

  • 將DOM操作從應用中解耦. 增強了可測試性。

  • 應用測試性與開發程式碼同樣重要. 測試的複雜程度與程式碼的設計結構強相關.

  • 客戶端與服務端解耦. 實現了併發處理機制增強了程式碼複用性.

  • 在開發全過程中作出指引: 從UI到業務邏輯最終到測試環節.

  架構

AngularJS - 下一個大框架

 AngularJS的關鍵特性

  可測試性,依賴注入,邏輯/檢視層的分離,還有設計者和開發者之間的協調合作是一個開發者對一個框架最期待的幾樣東西。Angular絕對滿足上述要求。在JS領域,Angular能適配這寫令人耳目一新的要求看起來是多麼驚人。

  雙向資料繫結:

  資料繫結可能是AngularJS裡最酷,最實用的功能。 它將節省你大量的樣板程式碼編寫。 一個典型的Web應用程式可以包含多達80%的程式碼基礎,如遍歷,操作,並聽取了監聽DOM。 資料繫結使得不用編寫這些程式碼,這樣你就可以專注於你的應用程式。

  考慮下你的應用程式的模型為單源信任的。 你的模型就是你去讀取或更新應用程式中的任何東西的地方。這種投射是無縫的,不需費你一兵一卒。AngularJS雙向資料繫結會處理DOM和模型之間的同步,反之亦然。

AngularJS - 下一個大框架

  模板

  在AngularJS, 模板就是原生的HTML. 做了基於檢視的增強. 這樣做最大的好處在於拉近了開發與設計人員的工作流. 設計人員操作HTML完成設計,開發直接在HTML上作相應的功能開發。

<div ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
  </ul>
</div>

  MVC

  AngularJS引入了軟體設計的MVC模式.這對於使用者來說仁者見仁智者見智. AngularJS並不是完全的MVC而是 MVVM (Model-View-ViewModel).

  • 模型

  model就是資料模型 就是一些JavaScript 物件. 沒必要從父類繼承,代理包裝亦或是使用getter/setter來使用. 使用vanilla JavaScript 十分方便便捷.

  • 檢視

  檢視就是提供特殊資料或方法來支援特定場景的物件.

  檢視物件就是 $scope. $scope就是個簡單的js物件,提供一些簡單的API監控其狀態.

  • 業務控制

  控制器起到設定 $scope物件的初始狀態及後續的動作關聯。 

  • 頁面

  在.AngularJS處理完相關的業務邏輯進行HTML模式的展示。

  這樣就奠定了應用的架構.  $scope物件擁有資料的引用關係, 控制器定義行為, 檢視處理頁面展示佈局以及相應的處理跳轉.

AngularJS - 下一個大框架

  依賴注入

  AngularJS 提供了依賴注入的子系統幫助開發人員降低開發複雜度,提高測試效率.依賴注入將業務程式碼與配置實現解耦,提高了程式碼的可測性. 

  有了DI無需每次都建立指定的物件依賴關係,而後面配置. 這樣就能按需分配而無需自己制定或是查詢. 就像要說一句"Hey I need X', DI就會幫你建立併傳送給你.

  採用依賴注入後能體驗到的好處主要包括:

  • 程式碼更易於維護。

  • API更為簡練和抽象。

  • 程式碼更易於測試。

  • 程式碼更加模組化、可複用性更強。

AngularJS - 下一個大框架

  指令

  指令可以被用來建立自定義的HTML標籤,這些標籤可以用作新的自定義的控制元件。它們也可以用來"渲染"有一定行為的元素,也可以以一些有趣的方式來操作DOM屬性。一個指令就是一個能引入新語法的東西。把分離的元件組合成一個元件,這種建立應用的方式將使得新增、修改和刪除頁面功能變得異常簡單。指令是AngularJS的一個非常強大且獨有的特性。

  從更高的層次說,  DOM 元素上的指令 (像是屬性,元素名,註釋或是 CSS ) 等給 AngularJS's HTML 編譯器傳遞的資料($compile) 從而傳遞指定的功能到DOM元素或是子元素。

  Angular 有很多這樣的內建指令,像是 ngBind, ngModel, 和ngView.Y還能自定義指令,當Angular啟動後HTML編譯器就會自動建立DOM元素的指令對映.

  測試

  AngularJS 意識到凡是js寫的程式碼需要加強測試. 這在 AngularJS 設計之初就有了, 於是Angular的可測試性不言而喻.

  JS是解釋性的動態語言,設計相應的測試決不可小覷.

  AngularJS 完全基於可測的根基設計出來的. 它提供了端到端的單元測試. API文件就是詳細的測試覆蓋說明. 

 AngularJS Bootstrap Process

AngularJS - 下一個大框架

 學習曲線

  剛開始學Augular覺得開發應用需要有相當的程式設計基礎. 不得不說這確實是一款了不起的開發框架,它要求開發人員設計低耦合和可維護的應用. 使用AngularJS 的複雜度就像使用PHP,Ruby on Rails等等, 都需要處理依賴注入,路由,值域等等. 這也不是什麼新技術了. Angular只是發揚光大了.

 JS MVC frameworks

AngularJS - 下一個大框架

  MVC (模型-檢視-控制器) 是一套設計模式,可以分層設計應用. 將資料(模型) 與使用者檢視 (檢視)解耦, 通過中間控制器 (Controllers) 處理業務邏輯, 使用者輸入以及相應的邏輯跳轉. 現代JS框架提供了簡易的操作以及SoC (業務分離) 更好的實現了MVC .

  MVC 對於JS有很多好處— 提高了高可靠性的程式碼. 已被很多語言大量測試驗證過,具有高可靠性.

  MVC 實現的三層結構:

  1. 模型: 是應用程式中用於處理應用程式資料邏輯的部分。
      通常模型物件負責在資料庫中存取資料.

  2. 檢視: 是應用程式中處理資料顯示的部分。
      通常檢視是依據模型資料建立的.

  3. 控制: 是應用程式中處理使用者互動的部分。
      通常控制器負責從檢視讀取資料,控制使用者輸入,並向模型傳送資料.

AngularJS - 下一個大框架

  JavaScript ‘MVC’可以幫助構建我們的程式碼,但盡信書不如無書. 有些框架把控制器放在檢視模式(比如 Backbone.js) 有些框架全部混在一起使用. 除此外還有其他的MVC模式,像是 MVP (Model-View-Presenter) and MVVM (Model-View ViewModel). 即便是MVC設計模型, 不同的語言也有不同的實現方式. 像是, 有些MVC實現會有自己的檢視變更控制器亦或是控制器檢視. 這些框架被稱為 MV* 框架, 意味著你會有模型,檢視但更會有其他的部分. 

  很長一段時間 AngularJS 是很標準的 MVC (或者說在客戶端實現這一塊),但在後來一段時間內隨著程式碼重構和API的重寫,現在更是 MVVM模式了 –  $scope 物件被認為是檢視模型然後被稱為控制器的功能模組包裝. 這樣分配到MV模式中是有些好處的.它會幫助開發者使用簡易的API開發基於框架的程式碼. 也能統一開發的共識。 使用MVC的初衷就是分解結構, 然後通過設定引數決定具體使用哪種 MV* 框架, Igor Minar (核心 AngularJS團隊)宣稱AngularJS 是 MVW 框架- Model-View-Whatever. whatever就是定製化的需求.

 為什麼使用 JS MVC 框架

  再來看看使用MVC和傳統開發模式的區別

  傳統Web應用

AngularJS - 下一個大框架

  傳統模式處理業務請求全部放在服務端,前段只是頁面互動 (瘦客戶端, 胖服務端). 這會有以下問題:

  • 分散式處理能力弱 – 伺服器處理大量業務,效能堪憂.

  • 相應壓力 – 傳統應用的響應速度是個硬傷.

  • 開發複雜度 –C/S結構的應用開發是比較複雜的. 由於每次請求響應都涉及到互動設計,很容易出錯。未解決該問題的框架也是層出不窮,可惜易用性有待考究.

  • 被攻擊危險 – 混編業務程式碼和互動程式碼,增加了程式碼受攻擊的概率.在複雜度很高的應用中更是不容易控制安全性。

  • 服務端的負載過大 – 所有客戶端的請求都需要經由服務端處理,這意味著所有的session都要等待30分鐘後才能被釋放,這時客戶請求早已處理完畢,但還在佔用系統資源,大大降低了系統效能和伸縮性.

  • 離線處理 – 擁有離線處理能力是web應用的競爭力,尤其在處理大量客戶端請求的應用中,離線處理部分業務更是不可或缺.

  • 互操作性弱– 由於混雜編寫,程式碼邏輯很難分割,擴充套件功能變得複雜.

  JSMVC Web 應用程式

AngularJS - 下一個大框架

  JS MVC web應用程式架構主要致力於將服務端的邏輯處理轉移到客戶端和實現瘦客戶端web應用程式。client/server模型的處理邏輯和程式碼被委託給瀏覽器的好處是:

  • 可擴充套件性:很容易看到利用客戶端處理在可擴充套件性方面的優勢。伺服器處理能力保持不變的前提下,應用被越多的客戶使用,那麼越多的客戶端機器可以被使用(直到你購買更多的伺服器)。

  • 實時的使用者響應:客戶端程式碼可以立即對使用者的輸入作出反應,而不需要等待網路傳輸。

  • 結構清晰的程式設計模型:使用者介面可以有效地分離應用程式的業務邏輯。這樣的模型為安全提供了一個更加簡潔方法。所有通過使用者介面的發出的請求,我們可以在資料通過各種介面前進行安全檢查。使用複雜的分析流程會讓安全分析變得更加複雜。另一方面,用清晰的web服務介面,有明確的閘道器安全工作和安全分析更簡單直觀,漏洞可以快速發現並糾正。

  • 客戶端狀態管理:在客戶端維護臨時會話狀態資訊可以減少伺服器上的記憶體負載。這也允許客戶利用更多的RESTful互動,可以進一步提高可伸縮性和使用快取的時機。

  • 離線應用-如果大部分應用程式的程式碼已經在客戶端上執行,那麼建立一個離線版本的應用程式可以肯定將會變得更加容易。

  • 互操作性:通過使用結構化資料和最小限度的api進行互動,這樣更容易連線額外的消費者和生產者與現有系統進行互動。

  為了開發實現一個客戶端web應用程式,需要組織我們的專案結構,這樣更易於後期的管理和維護。一個應用程式的指令碼超過幾十行的時候,如果它的元件之間的功能沒有分開處理,這樣應用會變得越來越難管理。我們一開始開發一個web應用程式的時候,可能會覺得簡單地通過一個DOM操作庫(如jQuery)和一些實用的外掛就可以完成了。這樣我們很容易就被應用裡面jQuery的巢狀回撥函式和沒有任何組織結構的DOM元素給搞蒙了。為了避免前面說到的問題,我們採用spaghetti code (一個描敘程式碼的術語,用來形容程式碼難以閱讀和因為缺乏組織結構難以維護)。像使用jQuery這樣的DOM操作庫和一些其他的實用庫我們可以更加容易使構建一個網頁。但是,這些庫在我們構建web應用程式時失去作用。

  web應用程式不像一個普通的網頁,他們更傾向於與使用者的互動並且需要實時與後端伺服器通訊。如果你沒有使用MVC框架來處理,這樣會最終會讓你寫出一些編寫混亂、非結構化、不可維護、不可測試的程式碼。為了避免“spaghetti”式的程式碼,那麼JavaScript開發人員必須首先要了解這種模式提供了什麼東西。這就可以看到這些框架能夠讓我們做什麼哪些不同的事情。

  使用JavaScript構建一個單頁面應用程式的時候,不管是否擁有一個複雜的使用者介面或者只是為了減少HTTP請求的數量,你可能會發現自己寫的很多可以組成一個MV *框架的程式碼。剛開始的時候,使用自己想出來的方式來避免“spaghetti”式程式碼寫一個應用框架並不是一件很難的事情,但是寫出像Angular/Backbone這樣的程式碼水平那就不太可能了。

  我們會發現有更多的人會傾向於構建一個應用,而不是試著去將DOM操作庫、模板、路由結合到一起。成熟的MV *框架通常不僅包括很多你發現自己寫過的類似的功能程式碼,而且也包含了很多你曾經遇到並且已經解決了的問題。框架為你節省了很多時間,這就是框架不能低估的價值所在。

  現在的瀏覽器提供了豐富的功能,變得越來越強大,這不僅讓在JavaScript中構建成熟的web應用程式成為可能,而且這個方式越來越受歡迎。根據 HTTP Archive資料顯示,今年部署的JavaScript程式碼規模增長了45%。

AngularJS - 下一個大框架

  隨著JavaScript的人氣攀升, 我們的客戶端應用程式比以前複雜得多 。一個應用程式開發需要多個開發人員合作,所以編寫可維護和可重用程式碼在新的web應用程式時代是非常重要的。設計模式對於編寫可維護和可重用的程式碼是很重要的。在過去幾年時間裡面,有很多JavaScript MVC框架已經被設計開發出來了,比如AngularJS,backbone.js, ember.js,還有很多其他的框架。雖然他們都有其獨特的優勢,但是每一框架都會鼓勵開發人員遵循一定的形式以編寫出更加結構化的JavaScript程式碼。

 什麼時候需要使用一個JS MV*框架

  如果你在構建一個應用,它的客戶端有許多重量級的功能,用純JavaScript很難應付,那你就應該考慮使用一個MVC框架。 如果選擇錯誤,你將會錯過MVC框架提供的功能,陷入重新發明輪子的境地。

  要注意的是,如果你構建的應用在伺服器端有很多重量級功能(即檢視生成/展現邏輯)並且在客戶端沒有多少互動的話,這時你會發現使用MVC框架就像是殺雞用牛刀。在那種情況下更好的選擇是,使用一個更簡單的、有少量附加功能的DOM操控類庫。

  下面這個列表並不完備,但是我們希望它能提供充分的理由幫你決定是否在你的應用中應該使用一個MVC框架:

  • 你的應用需要非同步連線到後臺

  • 你的應用有這樣的功能,它不需要重新載入整個頁面(比如給博文增加一條評論,無下限滾動)

  • 多數檢視或者資料操作將會在瀏覽器內完成,而不是在伺服器端完成

  • 同樣的資料在頁面上需要進行不同方式的渲染

  • 你的應用有許多瑣碎的互動來修改資料(按鈕, 開關)

  滿足這些情況的比較好的web應用的例子有Google Docs,Gmail或者Spotify。

 客戶機/伺服器架構的web應用程式

  世界已經被改變,部分應用的邏輯已經被移到客戶端。當我們需要以某種方式處理來自伺服器的所有資料時,這裡就描述這種情形。JS MVC框架鼓勵把表現層邏輯從伺服器端移動到客戶端,實現了RIA(Rich-Internet-Apllication),傳統web應用程式下的客戶機/伺服器架構和JS MVC下的客戶機/伺服器架構都基於web應用。

AngularJS - 下一個大框架AngularJS - 下一個大框架

  客戶端一側的MVC可以處理整個MVC棧。如果你同時使用伺服器和客戶端MVC,那麼你會複製你的模型和路徑。客戶端一側的MVC基本上允許你將你的伺服器和客戶端連線起來。為什麼你的伺服器要傳送檢視層?為什麼不傳送以json為格式的模型並載入它到客戶端一側,讓客戶端去渲染檢視。你甚至可以在將來為其規定路由。為什麼伺服器要處理路由?客戶端可以做這個。僅僅允許客戶端去訪問你的RESTful資料庫就行,並且你不需要任何伺服器端的MVC。

  較流行的一種包含客戶端服務端的模式是 後端RESTful API 通過 JSON傳送資料模型 客戶端使用MVC模式 處理應用.

  Client-side MVC with server-side RESTful API

AngularJS - 下一個大框架

  Data Flow

AngularJS - 下一個大框架

 AngularJS和其他JS MVC框架的對比

  在與其他JS MVC框架的爭戰中,AngularJS已經勝利了。它已經證明了自己是所有JS MVC框架中最成熟的。下面是來論證的資料

  社群支援

AngularJS - 下一個大框架

  (資料來自Github.com)

AngularJS - 下一個大框架

  (資料來自StackOverflow.com)

  隨著時間推移,興趣的趨勢

AngularJS - 下一個大框架

  (2011年8月-2014年6月)

AngularJS - 下一個大框架

  (上一年)

  使用統計

AngularJS - 下一個大框架

AngularJS - 下一個大框架

AngularJS - 下一個大框架

  特性對比

AngularJS - 下一個大框架

AngularJS - 下一個大框架

  使用者入門

AngularJS - 下一個大框架

AngularJS - 下一個大框架

  工作趨勢

AngularJS - 下一個大框架

 對比Angularjs和類似Dojo的企業級工具集(Toolkit)

  Dojo Toolkit:

  Dojo Toolkit是一個致力於簡化跨平臺JavaScript/Ajax應用和網站的開源模組化JavaScript類庫. Dojo是一個面向大規模客戶端web開發的JavaScript框架. 例如, Dojo抽取出一個遮蔽各種瀏覽器差異的API集合. 此外, Dojo的功能還包含: 定義了模組化程式碼的框架, 並管理他們的相互依賴關係;  提供構建工具集, 可以用來優化JavaScript和CSS程式碼, 生成文件並且執行單測; 支援國際化, 本地化和無障礙(accessibility); 提供了豐富了通用工具類和使用者介面元件(Widget).

  • 社群支援

       

AngularJS      

DOJO      

關注/收藏數      

25760      

300      

Fork次數      

9136      

216      

貢獻者      

877      

59      

釋出次數     

92      

147  

  • MVC

  Angular開發團隊已經將MVC設計模式以多種方式引入到Angular中, 因此會使得開發也必須跟隨這MVC設計模式. AngularJS並沒有以傳統的方式實現MVC, 而是更接近於MVVM(Model-View-ViewModel), 因此有時被統稱為MV*. MVC是Angular的核心, Angular為MVC設計模式提供了原生的支援, 可以輕易將其應用於web應用程式的開發中.

  Dojo的Toolkit為JS應用程式提供了實現MVC的獨立工具包. Dojo並沒有為JS應用程式提供完備的MVC實現, 而是根據應用程式自身需要, 選擇性使用其中的MVC工具/元件. Dojo提供MVC功能的包是dojox/mvc.這個dojox/mvc包主要關注客戶端的View到Model的資料繫結, 僅提供了在一個View中的資料繫結/控制器的支援, 並未提供在應用程式級別的跨多個View的支援(例如, 導航(Navigation)的支援). 

  在Dojo中,MVC應用中的級別關注點比如路由或者導航等必須使用另一個包(dojox/app)來處理,而在AngularJS框架中,這些關注點都是框架自身就能處理的。
dojox/mvc模組的狀態現在仍然是“Experimental” ,所以它仍然是不穩定的,正如下面這篇文章所說的(http://dojotoolkit.org/reference-guide/1.10/dojox/index.html#dojox-index),而Angular則是一個經過了更多的驗證、穩定而成熟的JS MVC框架。

  • SPA

  AngularJS是一個流行的全功能的SPA框架。AngularJS的一些固有特性支援了單頁面應用的開發。Angular通過下列特性來支援SPA:

  • 內嵌檢視(Nested Views)

  • 控制器(Controller)繼承

  • 路由(Routing)

  Dojo通過其Dojox/app包實現其構建單頁應用的目標。這個包是個小型的應用框架,提供了一組類,用於管理部署在移動裝置或桌面系統上的單頁面應用的生命週期和行為。該應用框架被設計成只需簡單配置一個配置檔案,由潛在的巢狀檢視組成應用,並便於這些檢視之間的過渡。

  使用Angular開發單頁面應用,可以很好的整合整個框架,同時框架提供了MVC功能,例如路由,控制器,檢視和單頁面應用模式是緊密結合的。Dojo中的Dojox/app則是一個獨立的元件,並未將單頁面應用與MVC緊密結合,因此,Dojox/mvc在使用的時候必須通過配置Dojox/app來管理解決,而這在Angular中是自帶的,而且容易使用的。

  • UI 掛件和庫

  Dojo提供了底層系統所支援的大量的widget(使用者介面元件).Dojo的UI庫稱為Dijit,使用一個單獨的名稱空間"dijit".

  Angular確實提供了一個UI widget工具集,但是沒有Dojo所提供的廣泛.Angular允許隨意使用流行的第三方UI庫.它提供了名為"Angular-UI"的UI庫,這個庫包含各種流行的第三方庫的widget和模組.其中,UI-Bootstrap模組將Bootstrcp框架的所有widget作為Angular指令.

  由於Dojo是一個工具集,所以它的任意一個工具都可以不依賴於Dojo生態系統而單獨使用.因此,Dojo的Dijit和其他流行的UI和widget庫,如JqueryUI和其他jquery或js外掛,都可以將它們包裝成指令後,在Angular應用程式中使用.

  • RESTful Interation

AngularJS使用angular-resource(ngResource)模組來提供RESTful互動功能,該模組表示一個REST資源並提供幫助方法(GET/POST/PUT/DELETE)來輕鬆的實現RESTful互動。另外也提供其它的可選模組。

Dojo使用dojo/store/JsonRest來提供RESTful互動能力。它是一個輕量級的物件儲存實現,給那些具有RESTful資料互動能力的HTTP客戶端來使用。

AngularJS和Dojo都提供了大體相當的RESTful互動能力。

  • 可維護性

AngularJS提供了一些特性,讓擁有大量程式碼基數的應用程式變得可維護.這些特性如下:

  • AngularJS 鼓勵和增強最小化DOM操作,推薦只在HTML中使用的指令中展現DOM操作.這樣可以避免由於大量使用DOM和DOM事件等產生的"義大利麵"式的程式碼.這些程式碼在大的web應用程式中難於除錯和跟蹤.Angular指令也為增加了HTML語義.

  • Angular提供了一些類似模組的特性,它允許應用程式開發者,將不同部分的應用程式邏輯打包成模組,以增加應用程式的模組化和可維護性.

  • Angular提供了DI (依賴注入) 設計模式的固有特性,它幫助應用程式保持模組化和易讀性.

  • 專案結構框架對於AngularJS已經可用,可以用來開發可維護的企業web應用程式.

Dojo沒有提供最小化DOM操作的技術,這樣,對於大型web應用程式,DOM操作增加了趨向於“義大利麵”式程式碼的可能性,也影響了應用程式的可維護性. Dojo支援模組(AMD),但是沒有為web應用程式提供DI模式.

  • 資料繫結和檢視模板化

  商業web應用程式的資料中心原則要求來自模型的資料和UI同步更新.對於一個商業web應用程式,動態檢視必須依賴於模型資料而建立.Angular提供了相當簡單和已有的技術,宣告式的編寫繫結到模組資料的動態檢視.在Angular裡面,檢視模板化使用包含Augular專有的元素和屬性的HTML編寫.使用HTML作為模板化語言,對於開發者而言,更易於建立和理解檢視.Angular結合了來自模型和控制器的資訊模板,用來渲染使用者在瀏覽器中看到的動態檢視.Angular使用了雙向繫結特性以保持UI和模型的同步.

  同樣的特性也可以在Dojo中使用,但是,它們和Dojo工具集的流程不太協調,也缺少了這個特性的簡單和細微化.

  • 宣告式的使用者介面

  AngularJS 提升了HTML檢視的 宣告式設計(declarative design)。在檢視層,使用HTML作為模板語言讓它變得相當容易開發建立檢視,同時也變得易於理解,在檢視語義上也有利於其他開發者。Angular提供一個特性,被稱為“directives”,它可以根據領域的需要,來提高HTML的定製性。 

  宣告式設計(declarative design)可以在Dojo應用中通過使用data-*屬性執行,但是它跟Angular的“directives”特性不一樣。

  • 支援 AngularJS 能更好的進行 IDE 和瀏覽器除錯

  Netbeans IDE也為AngularJS提供了內嵌的支援,它讓使用AngularJS可以簡單的開發web應用程式.(http://wiki.netbeans.org/NetBeans_80_NewAndNoteworthy#JavaScript)

  Angular團隊也為Google Chrome瀏覽器建立了一個名為Batarang的外掛,它提高了使用Angular開發應用程式的除錯體驗.這個外掛旨在簡化效能瓶頸的檢測,以及提供GUI來除錯應用程式.

  • 使用Dojo的時候很難在大型團隊中保持程式碼的統一

  Dojo中的程式設計模型是使用widget,當擴充它們的時候,它們將你的程式碼包圍住.你仍然在程式設計來操作DOM,連線/註冊/取消註冊事件.Dojox/mvc並沒有生成模組化的程式碼.在Dojo中有多餘2種或3種的方式做同樣的事情.其中一些甚至是糟糕的實踐,但是並沒有被清除.很難在大型團隊中加強程式碼的統一,因為Dojo沒有為模組化和統一化的web應用程式提供整體的框架.

  AngularJS提供了一個全面的框架,包含MVC的核心及規劃模型,具有均勻性,可理解性和模組化。AngularJS只為模型提供巢狀的控制器。良好的測試應用程式隔離的部分。定義良好的相關性。大部分時間你不寫程式碼操縱DOM自身。但你可以在建立指令(元件)時這樣做。沒有名稱空間混亂。你的物件從來不會出現在全域性名稱空間中,好像一切都封裝在Angular的應用中。MVC模式是核心。你的應用程式是一套控制器,服務,過濾器和自定義指令。

 總結

  本文意圖讓我們知曉web應用的未來就在眼前。並嘗試概述一個正確的有指導意義的方法來結構化和設計一個web應用,使之能適應web世界。本文概述了客戶端JS MV*框架的使用,並說明了為什麼用客戶端MVC框架組織的web應用很適合實現web應用。

  本文集中分析和總結了在成熟的客戶端MVC框架下的對比,並提供一些對比的統計資訊,幫助你和你的團隊決策,選擇出適合你的web應用的客戶端MVC框架。

  本文偏向於AngularJS框架,你可以有不同的偏好。對我來說AngularJS是我個人的喜好所在,在我眼中是其他客戶端MVC框架所不能匹敵的。

  原文地址:http://www.codeproject.com/Articles/799241/AngularJS-The-next-BIG-thing

相關文章