Angular2 其實可以很簡單：實務範例教學

作者序

隨著網際網路與視覺化呈現的盛行，Web 前端技術進步非常快速，然而，當專案及團隊具一定規模時，若沒有經過嚴謹的設計討論，往往會讓程式碼雜亂無章、不易維護。為了讓程式碼更容易理解與維護，進而發展出「軟體框架」，提升了開發上的效率，無論是選用哪一種框架，無疑地都能為專案的開發帶來效益。軟體框架有許多種，諸如：Angular、React、Vue等，而各家技術百家爭鳴且各擅勝場。AngularJS 是基於MVVM 設計模式所建立的一套網站前端開發框架，並且是由Google 維護開源的函式庫，其提供的雙向資料繫結更是受到許多程式開發者的青睞，成為現今相當流行的技術。

目前Angular2 穩定發佈中， 在環境的佈署上， 透過Node.js 的package 進行管理，直接下達指令即可輕易地完成環境的建置，相較於AngularJS，無論是效能及設計模式，都有顯著的改善。前後兩者之間並非僅僅程式碼修正升級，而是整個架構與概念的重構組成，由於移除了原先複雜的使用方法，也造就了學習曲線低的誘因，因此，未曾接觸過AngularJS的使用者，不會因銜接問題而使得上手有困難，對於Angular 的初學者來說是一大福音。

Angular2 開發團隊希望透過All-In-One 的架構，減輕前端開發上的
負擔，並透過MVC(Model-View-Controller) 的軟體架構設計模式，讓開發人員能夠清楚撰寫，降低程式碼間的耦合性。由於使用了TypeScript 作為主要語言，讓程式碼的結構性更加嚴謹，在JavaScript 上支援了(ES5 標準)，同時也以下個版本(ES6 標準) 作為使用基準。而針對模組化的技術，則實現了物件導向中的「開閉原則」以及「關注點分離」的概念，將組件模組化，減少程式碼的複雜度，由於Angular2 使用了RxJS、ImmutableJS、CSS Module 作為核心模組，因此對於此第三方的框架更具有親和力。

Angular2 將AngularJS 原有的設計核心做了某些幅度的改變，諸如＄scope.＄watch、＄scope.＄apply、＄timeout 等皆不會再用到，取而代之的是Zone.js，在核心模組中，Zone.js 透過異步處理，負責監控DOM 的變化。由於移除了＄scope，Angular2 強調組件(Component) 的使用，也就是將原先Directive、Controller 的設計概念整併。在資料的綁定上，保留了原先AngularJS 的單向綁定，同時又細分了屬性綁定以及事件綁定，降低了開發上的混淆度，而雙向綁定則改使用[(ngModel)]，明確表示當前物件對象具雙向特性。針對其他相關的修正如：ng-repeat、ng-if 等也進行了語法調整，後續皆會一一詳細介紹。

本書延續前一本『AngularJS 快速上手：實務範例教學』的觀念，從基礎介紹起，提供一系列的實作，同時也解說Node.js 基本安裝及指令操作，由淺入深地引導讀者們從環境佈署到網站建立。對於版面的編排：Component 與Directives、程式核心設計：DI 與Services 以及資料的規範：Form 表單建立都有深入的介紹，透過各章節的練習範例累積讀者對觀念的理解，再透過第九、十、十一章的完整實作範例將整本書的觀念貫穿，兼顧觀念與實作的撰寫方式，期望讓讀者們能輕易跨越學習Angular2 框架的門檻。

這本書是由學生團隊和指導老師們合力完成的書籍，章節中的範例都是學生學習後的成果，範例程式都經過學生們再三確認無誤，在此，非常感謝其聯、柏皓、宜成、盟興願意將本身的知識與學習經驗分享，透過一次又一次地討論與修改，由淺入深的編排整個Angular2 的重要觀念介紹，並輔以小型範例程式的實作說明，提高初學者對觀念的理解程度，也非常感謝子瑜、維中、彥廷、怡君、姣雯與歆荷對於書本內容的細心校稿、程式碼的測試與學習過程的貼心建議，讓這本書的內容與編排能更臻完善，也更貼近初學者的角度，最後，特別感謝歆荷的版面設計，再次強調學生們才是這本書的真正作者。
 

姜琇森 撰寫於 國立臺中科技大學資訊管理系