NG筆記1-AngularJS學習資源與術語

學習AngularJS一段時間,初步心得是"很強大但不好駕御",跟學習Knockout的經驗相比,差異程度大概像這樣:


照片來源: Jace 美國空軍

感受懸殊,關鍵在於應用心態不同。Knockout著眼於MVVM,以Binding為核心;但Binding卻只是Angular的一環,之所以選擇Angular,並非意圖用它取代KO處理MVVM(依我個人看法,KO把MVVM做得很好),而是SPA專案裡的JavaScript異常複雜龐大,Angular內建模組化、Controller、共用服務、View切換、依賴注入、自訂宣告(Directive)、自動測試等特性,能有效區隔程式邏輯實現SoC,大幅降低JavaScript複雜度。然而豐富的工具與強大的擴充性也意味著一大堆可調整的參數、可互相替代的做法、無限多種的排序組合... 學得愈多愈讓人迷惘,嚴重時還會誘發工程師的冒牌者症候群大爆發: "暗! 我這樣寫到底對不對呀?" 若只聚焦在MVVM,Angular並不難上手,當把視野放大到如何用Angular寫出"容於擴充維護的優質SPA",資深老鳥也很難不發抖吧? _(:3 」∠)_ 

以下整理我找到的一些學習資源: (如果大家還知道其他推薦資源,歡迎回饋給我)

  • 前端工程的極致精品: AngularJS 開發框架介紹
    保哥的介紹,不錯的入門起點,另外還有AngularJS系列文
  • 官網互動式入門教學(英文)
    教學影片 + 投影片 + 實做測驗,很炫!
  • YouTube上的教學影片(英文)
  • API官方文件 (英文)
    對API有疑義,這裡是最權威的文件來源,並區隔不同版本。唯文字與範例走"言簡意賅"風,偶爾需要一點慧根才能參透。(如果能像KO一樣Friendly就好了)
  • 男丁格爾大大的AngularJS入門教學
    有三十多篇,Binding部分介紹得蠻完整,但部落格分類目錄採倒著排序且需在目錄與文章間切換,為了方便閱讀,我用Angular寫了一個閱讀器 XD
  • AngularJS 開發實戰:解析 angular-seed 專案架構與內容 by 保哥
    談功能模組化與專案檔案配置,屬進階議題,但案子變大時一定得面對
  • Plunker
    提供類似JSBinJSFiddle的線上JavaScript程式展示平台,特色是有工作區及社群互動概念,一個工作區稱為一個Plunk,可以包含多個HTML、JS、CSS檔案,支援版控,還像Github一樣可以Fork、Star,Angular官方及社群的範例很多都放在Plunker。(PS: Plunker本身就是用AngularJS打造滴 :P)

後面我計劃將先前以KO實做過的範例全部用NG(Angular簡稱為NG)演練一次,確認自己有能力改用NG滿足常見的MVVM需求。但在開始之前,先定義一些我所理解的術語,以便未來在文章中出現時不會有太大落差: (如有謬誤也請指正)

  1. Controller
    就是MVC中的C,負責將ViewModel與View結合產生UI。HTML容器元素(body、div)用ng-controller標明負責該元素的Controller,一個網頁裡可以有多個Controller負責不同元素的Binding,父子元素的兩個Controller,其ViewModel預設會出現繼承關係。
  2. Scope
    資料繫結的對象,在Controller中以$scope物件形式出現,當我們寫<span ng-bind="someProp">時,通常就是指$scope.someProp(使用ng-repeat迴圈時則為集合中的逐一物件),Scope可以視為NG中ViewModel角色。跟KO的ViewModel一樣,Scope可以放屬性,也可以加入方法。
  3. Directive
    上面提到的ng-bind、ng-repeat就是所謂的Directive。Directive穿插於HTML標籤之間,串連HTML元素及ViewModel。在NG裡,也靠Directive將DOM事件(Click、Blur、Change...)關聯到ViewModel,例如: <input type="button" ng-click="buttonClick()">。
    另外,自訂Directive是我心中NG強悍的關鍵之一,例如,我們能自訂一個<check-list data-source="objectArray" prop-text="textProp" prop-value="valueProp">,將objectArray轉成Checkbox清單,活生生就像ASP.NET WebControl在HTML端復活了!
  4. Filter
    可應用於Directive,對繫結的資料進行後置處理,例如: {{ someDate | date:'yyyy-MM-dd' }}中date Filter將日期物件轉成指定格式字串、{{ dataArray | filter:{ id: 'A' } | json } }}中filter Filter對陣列進行篩選,只留下id屬性有"A"的物件,之後還能再串接另一個json Filter,將過濾後的陣列以JSON字串輸出。
    NG允許開發者自訂Filter,讓各式資料轉換、處理邏輯能很容易被加入Binding過程。
  5. Service
    跨Controller共用的邏輯一般會收納成Serivce。NG的Service有三種模式: Factory(所有Controller共享一個Service Instance,即Singleton模式)、Service(為每個Controller建立一個Instance專用)、Provider(自訂Service建構方式)
  6. Module
    Module是NG用來收納整理Controller、Directive、Filter、Serivce的管理單位,可以想像成.NET的Assembly。用Module將相關邏輯集中,存成不同JS檔,有利於維護及引用。
  7. Dependency Injection
    NG用了很多DI概念,於是乎你會常看到不知道從哪冒出來的$scope、$http、$sce等變數。在執行期間,NG依預先註冊的DI設定將$scope、$http指向對應的服務物件。這麼做有兩個好處: Controller不綁死服務來源,必要時可偷偷換掉或調整,呼叫端完全不用改(甚至不會察覺),第二項好處是做自動測試時,可換上測試用的Mock版本,以快速模擬特定情境,單獨測試指定的Controller或Service。

介紹完NG的幾個基本術語,後面就要捲起袖子試試NG的威力囉! 敬請期待。

[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs
歡迎推文分享:
Published 11 June 2014 10:54 PM 由 Jeffrey
Filed under:
Views: 72,477



意見

# kinanson said on 11 June, 2014 09:21 PM

終於可以看到黑大投向angular了,其實早期我剛開始學也是用knockout,學了一星期左右,就又試著學習angular,之後就完全投向angular了,現在又有黑大的投入,想必以後可以參考的資源更多了

# Eric said on 12 June, 2014 01:59 AM

Coding給你看的教學影片,有的需要付費

egghead.io/.../angularjs

# Jeffrey said on 12 June, 2014 08:53 PM

to Eric, 感謝補充。

# kkman021 said on 05 July, 2014 12:07 PM

黑大:有一個對岸的社群也有不少有用的文章:www.angularjs.cn/.../AngularJS

# Hank said on 01 June, 2016 01:02 AM

這篇太棒了~

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2014>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication