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

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

感受懸殊，關鍵在於應用心態不同。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
  提供類似JSBin、JSFiddle的線上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的威力囉! 敬請期待。