歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> AngularJS - 下一個大框架

AngularJS - 下一個大框架

日期:2017/3/1 9:40:18   编辑:Linux編程

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操作增強了可測試性.

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

設計初衷:

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

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

  • 客戶端與服務端解耦. 實現了並發處理機制增強了代碼復用性.

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

架構

AngularJS的關鍵特性

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

雙向數據綁定:

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

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

模板

在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 提供了依賴注入的子系統幫助開發人員降低開發復雜度,提高測試效率.依賴注入將業務代碼與配置實現解耦,提高了代碼的可測性.

有了DI無需每次都創建指定的對象依賴關系,而後面配置. 這樣就能按需分配而無需自己制定或是查找. 就像要說一句"Hey I need X', DI就會幫你創建並發送給你.

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

  • 代碼更易於維護。

  • API更為簡練和抽象。

  • 代碼更易於測試。

  • 代碼更加模塊化、可復用性更強。

指令

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

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-09/106352p2.htm

Copyright © Linux教程網 All Rights Reserved