AngularJS 快速上手：實務範例教學

隨著網頁前端的應用越來越廣泛，使得網頁的介面設計，JavaScript 越

來越不可或缺，也因而發展出許多不同的套件與框架，其中AngularJS 是最近最為火紅的框架之一。AngularJS 是透過MVVM 模式來撰寫，包含宣告式語法(Directive)、雙向資料繫結(Two Way Data-Binding)、相依性注入

(Dependency Injection) 與關注點分離等優點特性，對於網頁前端設計人員非常有用，而對於習慣MVC 框架的人員更是容易上手。

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

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

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

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

1. 教戰守則篇：為AngularJS 基礎概念教學的部分，除JavaScript 的基礎教

學外，更詳細為讀者講解AngularJS 必學的基本概念。

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

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

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

姜琇森、蕭國倫

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

隨著網頁前端的應用越來越廣泛，使得網頁的介面設計，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
普通常用
事件常用
表單常用
介紹表單驗證
06 Function
常用的function
驗證用的function
07 Filters
何謂fi lters?
常見的fi lters
7.7 本章小結
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：製作西元年與民國年轉換的fi lter
範例2：製作公升與加侖轉換的fi lter
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
普通常用
事件常用
表單常用
介紹表單驗證
06 Funct...