經典實戰手冊：AngularJS 全攻略

隨著網頁前端的應用越來越廣泛，使得網頁的介面設計，JavaScript越來越不可或缺，也因而發展出許多不同的套件與框架，其中AngularJS是最近最為火紅的框架之一。AngularJS是透過MVVM模式來撰寫，包含宣告式語法(Directive)、雙向資料繫結(Two Way Data-Binding)、相依性注入(Dependency Injection)與關注點分離等優點特性，對於網頁前端設計人員非常有用，而對於習慣MVC框架的人員更是容易上手。

於國立臺中科技大學資訊管理系任教的這幾年裡，我們積極訓練學生的技能、發掘他們的潛力並與廠商深入互動交流，期望能夠創造一個產學互助的模式，幫助學生順利就業。經由開發產學案與企業實習的經驗，我們與學生成長許多，透過師生的合作，編制了一些教材與訓練課程，從而持續不間斷地訓練新進的學生，我們兩位老師非常幸運，收到的學生積極進取、態度極佳、學習能力強且渴望學習，在帶領與互動的過程中，培養出深厚的師生情誼，並逐漸建立一套技術傳承的學習模式。

此外，我們發現「以戰養戰」是培養學生專業技能最好的方法。當學生開始熟悉一項新的技術時，我們便開始給學生更多的目標及方向，給他們更多的練習，讓他們寫更多的範例，再挑戰其它新的技術，如此一直不斷的精進學生的技能。而實戰才有辦法培養實作的能力，學校的練習與工作實務上仍有一段落差，不斷的讓學生參與競賽及產學合作才能彌補這段落差，我們相信每位學生都有潛力，只要經得起磨練，一定能養成優秀的技能，接著透過技術傳承，讓每位願意努力學習的學生，都能獲益及成長，其中，將經驗及範例寫成書籍出版，便是一種傳承的方式，也是撰寫這本書的初衷及目的。

AngularJS是一個新的技術框架，為了讓初學者能夠更容易的了解與學習，本書提供了很多的範例與補充說明，以減低學習者在學習上的困難，在觀念講解部分，本書特別加上許多小範例說明，讓初學者能夠循序漸進地實作學習，加深對書中觀念的理解，進而培養出優秀的邏輯與系統開發能力。最後以完整的範例，貫穿整本書所要表達的觀念，讓學習者能透過實作範例更清楚瞭解書本的內容。

本書分為三大部分，分別為「教戰守則篇」、「觀念養成篇」及「實作練習篇」。

1. 教戰守則篇：為AngularJS基礎概念教學的部分，除JavaScript的基礎教學外，更詳細為讀者講解AngularJS必學的基本概念。

2. 觀念養成篇：此部分循序漸進的介紹一些實用的程式技巧，透過小範例練習的方式，深入淺出的協助學習者加深先前描述的觀念，透過練習強化由了解到實作執行 的能力。

3. 實作練習篇：以三個完整的範例，採用引導的方式帶領讀者一步步完成範例，讀者可藉由範例累積更多的經驗。

這本書是由學生團隊和指導老師們合力完成的書籍，這本書的範例都是學生練習後的成果，範例程式碼都經過學生們再三確認無誤，學生們才是這本書的真正作者。

姜琇森、蕭國倫

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

團隊成員序

本書的初衷是希望讀者不只從理論的角度，更從實際範例中，一步一步直接理解程式的撰寫方法，並以淺顯易懂的方式講解功能要點，讓讀者無負擔的讀懂每一個細節，減緩學習新程式碼的陡峭學習曲線，讓初學者省下學習撞牆期的時間，直接在範例中學習到精隨。

實驗室團隊透過產學合作、企業實習等方式與業界互動良好，當中更有成員在業界工作兩年，了解到AngularJS的方便性及好用性，而市面上並沒有針對初學者的特性，循序漸進、深入淺出且透過範例教學的一本書。基於本實驗室一貫經驗傳承的傳統與學長帶學弟的學習方式，逐漸將許多經驗慢慢累積，老師深深覺得可將這樣的撰寫經驗與教學過程分享出去，於是經由老師的一句話：「你們就寫一本AngularJS的書吧！」，成為此書的核心理念。

本團隊秉持教學的精神，希望將我們所學習到的知識匯集成內容，並以「初學者的角度」去教導各個AngularJS新手讀者，帶領讀者快速進入AngularJS的世界。然而，要完整的將這些技巧以知識傳遞的方式呈現，並非這麼容易，須站在初學者的觀點去思考，該如何呈現可讓初學者能真正理解並輕鬆地完成學習的內容。因此本團隊在書本的描述中，以最基礎的語法開始，並提供許多小範例供讀者練習，加深學習的印象，在這些範例中逐步地讓讀者體會「撰寫程式的感覺」與「成就感」，再透過引導的方式逐漸將本團隊設計的範例完成。

本書所設計的範例，是參考網路內容、學長經驗傳承與企業實習經驗後，重新設計而成，這些學習並非是直接將程式碼複製貼上的去執行，而是透過流程的分析，觀察運作的方式，透過理解程式與分析流程的內容，自行將程式碼撰寫出來。若讀者可藉由上述方式來撰寫程式，讀者將能成功習得技巧。

能完成此書必須要感謝本團隊的指導老師 姜琇森老師與蕭國倫老師，提供本團隊很多的機會、環境以及資源，教導許多邏輯思考方式與正確的程式觀念，更不厭其煩且不斷鼓勵與指導我們，不僅在休息時間監督本團隊的進度，花費眾多時間進行小組會議給予正確的指導與修改方向，花費許多心力批改與校正初稿，訂正累贅措辭，並實際的實作範例多次，給予正確的修正。

此外，老師不時給我們鼓勵、凝聚團隊向心力，更創造實驗室自我努力與研發的氛圍，讓我們可以更加融入團隊合作，進行討論與分享心得。雖然老師平時會給予我們很多的壓力，但這也促使我們能夠快速的成長，老師也時常引導我們走到正確的方向，並給我們許多人生經驗的分享，讓我們可以克服壓力與挫折，也使得本書能夠順利完成。

再者最要感謝的是蔣宜成學長花費許多的時間帶領與教導大家AngularJS技術，讓大家從基礎學習，並投入書本的編輯、由淺入深的排序、程式邏輯與觀念澄清等工作，使整本書的內容能更加完善。這本書能夠完成，宜成學長居功厥偉，扮演著最重要的角色，也是貢獻最多的人。此外，要感謝實驗室的成員林思妤及彭瑞蕙，幫助本團隊一起修正文章內的錯誤，更使書本中的文字圖片更精細，使讀者能夠看得更清楚。在團隊中每個成員如齒輪一般，彼此支援、相互配合、截長補短，才能完成這樣的作品。

王麒瑞、張哲瑋、吳彧傑、黃士恆、蔣宜成、蕭盟興

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

隨著網頁前端的應用越來越廣泛，使得網頁的介面設計，JavaScript越來越不可或缺，也因而發展出許多不同的套件與框架，其中AngularJS是最近最為火紅的框架之一。AngularJS是透過MVVM模式來撰寫，包含宣告式語法(Directive)、雙向資料繫結(Two Way Data-Binding)、相依性注入(Dependency Injection)與關注點分離等優點特性，對於網頁前端設計人員非常有用，而對於習慣MVC框架的人員更是容易上手。

於國立臺中科技大學資訊管理系任教的這幾年裡，我們積極訓練學生的技能、發掘他們的潛力並與廠商深入互動交流，期望能夠創造一個產學互助的模...

Part 1 教戰守則篇
01 JavaScript 簡介
為什麼是JavaScript？
什麼是JavaScript？
除錯的好工具console
JavaScript 的函數
JavaScript 的物件
JavaScript 的陣列
02 AngularJS 簡介
MVVM
載入AngularJS
Expressions
Two-Way Data Binding
DI
Directive
延伸
03 Module
定義模組
模組拆解與組合
常見模組架構
04 Controller
定義對象值
使用this
使用$scope
Controller 繼承
$rootScope
Part 2 觀念養成篇
05 Directive
普通常用
事件常用
表單常用2
介紹表單驗證
06 Function
常用的function
驗證用的function
07 Filters
何謂fi lters?
常見的fi lters
08 Services
常見Service 介紹
$timeout 與$interval 的差別
09 ngRoute
index.html
role.html
soldier.html
master.html
archer.html
priest.html
10 自定義Directive
restrict
template
templateUrl
priority
replace
transclude
controller
link
compile
require
scope
11 自定義 Filters
範例1：製作西元年與民國年轉換的filter
範例2：製作公升與加侖轉換的filter
12 自定義Service
範例1：自訂Service 與Factory 並注入至controller
Service、Factory 的差異
Part 3 實作練習篇
13 範例一：角色建立
14 範例二：裝備與技能
15 範例三：魔王對戰

Part 1 教戰守則篇
01 JavaScript 簡介
為什麼是JavaScript？
什麼是JavaScript？
除錯的好工具console
JavaScript 的函數
JavaScript 的物件
JavaScript 的陣列
02 AngularJS 簡介
MVVM
載入AngularJS
Expressions
Two-Way Data Binding
DI
Directive
延伸
03 Module
定義模組
模組拆解與組合
常見模組架構
04 Controller
定義對象值
使用this
使用$scope
Controller 繼承
$rootScope
Part 2 觀念養成篇
05 Directive
普通常用
事件常用
表單常用2
介紹表單驗證
06 Function
常用的function
驗證用的f...