2015年12月12日 星期六

關於 AngularJS

今天想起同學仲仔跟我提到的 Bootstrap 框架, 就來調查一下底細, 結果看到下面這篇 :

比較Angular/jQueryUI/Extjs:沒有一個框架是萬能的

哇咧, 這作者下筆還真幽默. 不過看完才知原來 AngularJS 這麼好用, 也讓快一年沒摸前端技術的我燃起心中一把火, 突然想找一本書來研究研究 (還真是喜新厭舊). 雖然原文書已經非常多, 但是很可惜, 目前中文書只有一本 :

# AngularJS 建置與執行 (歐萊里)

這本書譯自 Oreilly 的 "AngularJS : Up and Running", 雖然讀原文書對我是家常便飯, 但如果有中文譯本, 老實說還是看中文翻頁速度較快, 畢竟中文是圖像語言, 而英文是聲音語言. 此書市圖有進, 不需要買, 目前通閱申請中.

AngularJS 是一種前端 Javascript 框架, 是 Google 工程師為了加速專案開發而發展出來的一種技術, 主要的構想是希望在前端網頁中也使用後端常見的軟體工程 MVC 架構來加速開發速度, 並且提高程式的可測試性. 關於 AngularJS 的介紹可參考下列文章 :

# https://zh.wikipedia.org/wiki/AngularJS
# 前端工程的極致精品: AngularJS 開發框架介紹
# 比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得
# AngularJS 、Backbone.js 和 Ember.js 的比较
Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹

以下是我閱讀後的一些摘要 :
  1. AngularJS 使用宣告式語法在傳統的 HTML 語法中加入特定屬性來擴展其能力, 函式庫在讀取這些屬性後, 依照其中的指令將網頁中的輸入或輸出與模型中的 Javascript 變數雙向綁定起來, 從而達成動態即時反映的效果.
  2. AngularJS 的範本引擎使用 DOM Template, 即直接以 DOM 物件當作網頁片段的範本, 有別於其他架構以字串來定義之範本, 這樣便省掉變數替換時所需的型別轉換時間, 效能較優.
  3. AngularJS 的目標是要規範與後端 CRUD (增查修刪) 作業以其所規定的標準方式進行. 除了 CRUD 網頁應用程式外, AngularJS 幾乎毫無用武之地. 如果想要操控 DOM, 應該使用 jQuery 之類的框架. 
  4. AngularJS 與 jQuery 等專注於 DOM 操控的函式庫是不一樣的, 主要的目的是要將程式邏輯與 DOM 的操控分離開來, 讓客戶端與伺服端地開發可以同時進行而不會互相牽制.
AngularJS 最新版 (目前是 1.5.0) 可在官網下載, 壓縮檔約 149KB :

https://angularjs.org/

只要在網頁中指定此函式庫即可 :

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
</body>
</html>

如果專案是放在 Internet 上, 也可以直接使用 Google 提供的 CDN :

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js

一個簡單的雙向資料繫節範例可在下面這篇的後半部找到 :

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

另外, 這篇也介紹了一個好用的 Javascript 線上編譯平台 jsbin, 這跟我之前所用的 jsfiddle 很像, 都是免費使用的, 不過它是用 Git 帳號登入的, 而且對於 AngularJS 函式庫的支援較多. 這兩個線上平台都很好用, 只要連上網, 不須配置環境, 馬上就可以調用各個框架編寫程式進行測試.
 
20180313 補充 :

紀錄兩篇談 Angular JS 的文章 :

jQuery 跟 AngularJS 的糾葛
有jQuery背景的开发者如何建立起AngularJS的思维模式?

沒有留言 :