吳其聯

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

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

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

前言

第1章 網頁前端基礎概念：JavaScript ES6
關於JavaScript
JavaScript? ECMAScript?
ES6 的向下相容性
基本語法

第2章 讓JavaScript 更強大：TypeScript
為何需要TypeScript
如何執行TypeScript?
有別於JavaScript 的部分

第3章 進入Angular2 的世界
開發Angular2 需要什麼
第一個Angular2 專案

第4章 資料流的控制：Data binding
Data binding 機制
內嵌綁定(interpolation)
屬性綁定(property binding)
事件綁定(event binding)
雙向綁定(Two-way data binding)
Component 生命週期

第5章 畫面建構師：Component 與Directives t
Component 建立
Component 類別
Binding 資料
One-way Binding
Two-way Binding
Interface 型別
@Input 輸入資料
Attribute Directives
@Output 輸出資料

第6章 程式核心設計：DI 與Services
DI 基礎概念
基本－無DI 版
基本－ DI 版
延伸－擴充實作
進階－ DI 工廠模式
進階－ DI Provider

第7章 資料的規範：Form 表單建立
表單建立
Template Driven Forms
Form 的欄位狀態
Model Driven Forms

第8章 資料的格式：Pipe
何謂Pipe
常見的Pipe

第9章 網站網址流程控管：Routing
關於路由(Routing)
建立帶有路由的專案
練習：簡易個人網站

第10章進階練習：TodoList
還可以更好：TodoList
建構路由
統一資料處理

第11章 實戰練習：開獎遊戲
開獎遊戲
介面
元件(Component)
HTML 與CSS
開獎遊戲完成畫面

前言

第1章 網頁前端基礎概念：JavaScript ES6
關於JavaScript
JavaScript? ECMAScript?
ES6 的向下相容性
基本語法

第2章 讓JavaScript 更強大：TypeScript
為何需要TypeScript
如何執行TypeScript?
有別於JavaScript 的部分

第3章 進入Angular2 的世界
開發Angular2 需要什麼
第一個Angular2 專案

第4章 資料流的控制：Data binding
Data binding 機制
內嵌綁定(interpolation)
屬性綁定(property binding)
事件綁定(event binding)
雙向綁定(Two-way data binding)
Component 生命週期

第5章 ...