作者序 隨著網際網路與視覺化呈現的盛行,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 的重要觀念介紹,並輔以小型範例程式的實作說明,提高初學者對觀念的理解程度,也非常感謝子瑜、維中、彥廷、怡君、姣雯與歆荷對於書本內容的細心校稿、程式碼的測試與學習過程的貼心建議,讓這本書的內容與編排能更臻完善,也更貼近初學者的角度,最後,特彆感謝歆荷的版麵設計,再次強調學生們纔是這本書的真正作者。
薑琇森 撰寫於 國立颱中科技大學資訊管理係