學習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

Comments

# by kinanson

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

# by Jeffrey

to Eric, 感謝補充。

# by Hank

這篇太棒了~

# by oliver

Thanks a lot for the helpful information. this is an interesting article with all the sources of learning related to angular JS like https://eduhelphub.com/ and the represented discussion in the article is also very informative. Thanks again.

Post a comment