文章出處

AngularJS 是谷歌的一個 JavaScript 框架,旨在簡化前端應用程序的開發。

一. 關于和jquery的比較

首先angular是一個mvc框架,它與jquery不同之處在于,前者致力于mvc代碼解耦,采用model,controller以及view方式去組織代碼,而后者提供給你了很多APi函數,你可以不用寫很多原生js去實現比較復雜的效果,比如說動畫,$.animate,這樣的效果如果需要原生js來寫的話,代碼量將會比較龐大;

其次,jQuery沒有定義你的代碼如何組織,你可以將它放在一個單獨的js文件中進行引用,也可以直接寫在頁面中采用script標簽進行包裹,甚至可以直接以內聯的方式寫在html標簽中,但是angularjs會將一個HTML頁面分成若干個模塊,每個模塊都可以自己的scope,service以及directive,各個模塊之間也可以進行通信,但是整體上結構是比較清晰的,就是說其代碼組織方式是模塊化的。

最后,jQuery的思想是先設計好頁面,然后在已有頁面的基礎上進行dom操作后展示頁面,但是angular的view可能僅僅是一個框架,對view的dom操作或者時間監聽都是在directive中實現的,而且一般情況下很少自己直接去寫Dom操作代碼,只要你監聽model。model發生變化后view也會發生變化。

二. 關于適用場合

jQuery應該適用于大多數web開發,移動端也有(jQuerymobile),angularjs有人說更適合做SPA(我個人認為在手機上的SPA可能會引發性能上的問題,因為它的臟檢查機制會影響性能),在web端,一些CRUD的應用或者管理類軟件還是可以使用的(當然這里的理解可能不一定準確,會隨著深入學習更多去了解和使用)。

三. 關于UI的結合

開發任何產品都需要用到前端UI,目前很多UI是基于jQuery的,這意味著你如果要用angularjs和這些Ui組件的話,需要用angularjs的directive去重寫些組件,這一過程是比較麻煩的,所幸的是,angular給我們提供了一些UI組件可以使用(web端主要是結合bootstrap前端組件),http://angular-ui.github.io/,而在移動端主要是結合ionic框架http://ionicframework.com/,但是隨著angular的發展,很多HTML5的前端框架也慢慢集成了angularjs版本可供使用。

四. angularJS特點

#1 良好的應用程序結構——代碼模塊化

  通常情況下,我們編寫 JavaScript 沒有明確的結構。雖然在編寫小應用程序的時候沒有問題,但這顯然是不適合于大規模的應用程序。使用 AngularJS,您可以通過MVC(模型 - 視圖 - 控制器)或MVVM (模型 - 視圖 - 視圖模型)模式來組織源代碼。 AngularJS 是一個 MVW 框架,其中W代表可以用于任何項目。你可以組織你的代碼模塊,它可顯著提高應用程序的可測試性和可維護性。每個模塊的代碼獨立擁有自己的作用域,model,controller等。

#2 雙向數據綁定

  數據綁定肯定是 AngularJS 最佳功能之一。你可以聲明綁定的模型到 HTML 元素。當模型Model發生變化時,視圖View會自動更新,反之亦然。這可以減少大量的傳統樣板代碼,保持模型和視圖同步。

#3 指令

  AngularJS 指令讓你使用 HTML 新語法快速的構建應用程序。您可以創建可重用的自定義組件與指令的API。強大的directive可以將很多功能封裝成HTML的tag,屬性或者注釋等,這大大美化了HTML的結構,增強了可閱讀性;例如,如果你想自定義日期選擇器小部件,你可以創建一個<data-picker/ >組件。如果你想要一個奇特的文件上傳與進度指示器可以繼續創建一個<file-upload/ >組件。很酷,不是嗎?

#4 HTML 模板

  AngularJS 使用 HTML 模板,這使事情變得簡單,并允許設計人員和開發人員同時工作。設計人員可以按照通常的方式創建用戶界面,而開發人員可以使用聲明性綁定語法很容易配合不同的UI組件的數據模型。

#5 可嵌入、注入和測試

  關于 AngularJS 的最好的事情是,它是一個很好的團隊成員。它從來沒有要求全面承諾。AngularJS 官方網站說,你可以根據你需要使用盡可能多或盡可能少的在項目中使用 AngularJS。如果你只需要雙向數據綁定,您可以引入 Angular,只是使用此功能。

  AngularJS 支持依賴注入的開箱即用。如果你需要的東西,你只要調用 Angular 來注入。將這種后端語言的設計模式賦予前端代碼,這意味著前端的代碼可以提高重用性和靈活性,未來的模式可能將大量操作放在客戶端,服務端只提供數據來源和其他客戶端無法完成的操作;就這么簡單。這巨大的提高可測試性,因為你可以很容易地在測試的模擬組件。

  AngularJS 在創建時候始終考慮著可測試性(測試驅動開發)。這些模塊和依賴注入系統,使得單元測試和端對端測試更容易。此外, AngularJS 提供了一個稱為量角器工具,這使得終端到終端的測試變得輕而易舉。所以,你開發的代碼始終是可測試性和可維護性。

另外推薦參考一篇知乎:http://www.zhihu.com/question/22284218?rf=25116320

  這還不是全部! AngularJS 還提供了更多的實用功能,如路由,過濾器,和動畫等等。不過,以上幾點已足以讓我愛上它。


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()