Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 本網站預計持續維運至 2021年底,網站內容基本上不會再更動。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
Tech Column AngularJS 簡介

AngularJS 簡介

甚麼是 AngularJS?

AngularJS 是一個使用 HTML、JavaScript 和 CSS 來建立 Web 應用程式的框架(Framework),其由 Google 所創建,用來協助單一頁面應用程式的運行。

它可以擴展應用程式中的 HTML 詞彙,從而在 Web 應用程式中使用 HTML 聲明動態內容,並擴展 HTML 的語法,以便清晰、簡潔地表示應用程式中的組件,並允許將標準的 HTML 作為你的模板語言(Template Language)。

函式庫讀取包含附加自定義(標籤屬性)的 HTML,遵從這些自定義屬性中的指令,可將頁面中的輸入或輸出與 JavaScript 的變量表示模型綁定起來。這些 JavaScript 變量的值可以手動設置,或從靜態/動態的 JSON 資源中獲取。

AngularJS 可以通過雙向資料綁定(Two-way Data Binding),自動從擁有 JavaScript 對象(模型)的 UI(視圖)中同步數據。AngularJS 提供了強大的資料綁定、依賴注入(Dependency Injection)...等,使你可以測試和維護 Webapp。


1、 有別於傳統的函式庫或框架,AngularJS 擁有屬於自己的一套:

  • 直接以 HTML(DOM)當成 Template 來使用
  • 將 HTML 變成可複用的元件
  • 資料綁定在 {{}} 裡面
  • 支援表單操作與表單驗證
  • 將程式碼(Code-behind)綁定在 DOM 元素上

2、 AngularJS 完整的前端解決方案:

  • 適合用於 CRUE 類型的網站專案/後台(資料連結、基本範本指令、表單驗證...)
  • 不適合用於需要大量 DOM 操作的網站
  • 完整的單元測試與 E2E(End to End)測試架構

3、 AngularJS 表達式(Angular Expressions):

  • 使用「JavaScript」語法表達模型的程式片段
  • 通常用來輸出 Model 的資料或執行控制器的函式
  • 範例:{{9*9}}{{sum()}}{{'hello'}}

AngularJS 框架介紹:

一個由 Google 打造的前端 JavaScript 框架,與其他 JS 框架最大的不同在於,它直接延伸現有的 HTML 架構,透過宣告式語法(Directives Syntax)直接賦予 HTML 額外的能力,並通過雙向的資料綁定來適應動態內容。雙向資料綁定允許模型和視圖之間自動同步。因此,AngularJS 提升了可測試性,也讓 Web 應用程式在元件化的過程變得極其簡潔有力。


1、 AngularJS 的強項:

  • 「關注點分離」:

    控制器(Controllers)與檢視(Views)之間切割的非常乾淨,再搭配模組(Module)與依賴性注入相關實作。將商業邏輯從 HTML 中抽離,簡化複雜度(從 DOM 操作中分離思考),以及將網站的前/後端乾淨分離,並簡化後端開發。

  • 「以習慣取代配置」:

    AngularJS 所設計的宣告式語法直接延伸 HTML 的能力,讓許多 AngularJS 自訂的 HTML 屬性能自然地融入其中,並賦予其意義,而這就是所謂的習慣(Convention)。這是大多數 JS 框架不敢做的嘗試,也因為如此,這樣的設計觀點並不是所有人都能接受。

2、 在 AngularJS 裡,當瀏覽器將 HTML 與這些 AngularJS 自訂的語法解析成 DOM 物件之後,AngularJS 會直接將原生的 DOM 物件當作網頁片段的範本,然後直接以 DOM 物件(原生的 JavaScript 物件)進行操作。這大幅減少了轉換型別的成本,但相對在範本操作的過程,其效能也比其他框架高出許多,這也就是 AngularJS 所謂的 DOM Templates 特性。

3、 AngularJS 所提供的雙向資料綁定特性,可以說是最實用的功能之一,雖然這個特性並不是 AngularJS 獨有(其他 JS 框架也大多都有此特性),不過對於沒有接觸過其他框架的人來說,這確實是一個非常有趣的功能之一。


AngularJS 的設計與目標:

AngularJS 信奉的是,當組建視圖(UI)與寫軟件邏輯同時進行時,聲明式的代碼會比命令式的代碼來的好,儘管命令式的代碼非常適合用來表達業務邏輯。

AngularJS 透過 MVC(Model-View-Controller)模式功能增強瀏覽器的應用,使開發和測試變得容易,並通過依賴注入為客戶端的 Web 應用提供了傳統服務端的服務,例如獨立於視圖的控制。因此,後端減少了許多負擔,產生了更簡單的 Web 應用。


1、 AngularJS 的理念:

  • 將應用邏輯與對 DOM 的操作分開處理(提高代碼的可測試性)
  • 應用程序的測試與應用程序的編寫一樣重要(代碼的構成方式對測試的難度有巨大的影響)
  • 將應用程序的客戶端與服務器端分開(這允許客戶端和服務器端的開發可以齊頭並進,並且讓雙方的複用成為可能)
  • 指導開發者完成建立應用程序的整個歷程(從用戶界面的設計,到編寫業務邏輯,再到測試)
  • 化繁為簡(總是好的)

2、 可以免除以下痛苦:

  • 註冊大量的 Callback 函式(回調容易打亂代碼的可讀性)
  • 大量操作 DOM 物件(DOM 很笨重且容易出錯)
  • 從 UI 中擷取與資料處理(非具體的業務邏輯和業務細節)
  • 需要撰寫大量的初始化程式才能使用框架








參考資料:

AngularJS 官網

AngularJS 維基百科

AngularJS 入門簡介

前端工程的極致精品: AngularJS 開發框架介紹



You may be interested in the following articles:




OSSF Newsletter : 第 239 期 AngularJS 簡介

Category: Tech Column



Comments 

 
0 #1 jzzdrmr 2014-05-01 02:11
CRUE you meant CRUD?