序章
相信身為 Coder 的你，「不」一定聽過 JavaScript（沒聽過也沒關係，請看註1）
但一定聽過 jQuery、React、AngularJS....
那，你知道他們是什麼嗎？
註1：JavaScript 是一種程式語言，也是瀏覽器（Browser）的一部份，最初是用來增加網頁的動態功能，目前也能在網路伺服器（ex：node.js）或是手機應用程式（Application）上都能夠運行。
前端是什麼？
前端泛指你目前所看到的畫面，例如：你目前正在使用網頁上的一切，通通可以稱做為前端。前端也是提供畫面與你互動的最佳工具，不管是你所看到的畫面、按鈕、網拍或是動畫等等...
這些技術通稱為前端技術。
那麼，AngularJS是什麼？
 |
| AngularJS官方Logo |
其目的是透過 MVC 架構來使開發與測試變的容易許多。
*目前 Google 已經發行了 AgularJS 2.0，本篇只探討 AngualrJS 1.0 的部分，敬請見諒。
學習重點
- 為什麼 AngualrJS 好維護？
- 為什麼 AngularJS 可以有效的減少程式碼複雜度？
使用 AngularJS 的理由
- 需求：在網頁上即時呈現使用者所輸入的資料
in JavaScript：
in AngularJS：
發現了嗎？兩邊最大的差別在於，JavaScript 中需要寫 code 的行數
「AngularJS 不需要寫 code，就能達到需求！」
「AngularJS 不需要寫 code，就能達到需求！」
「AngularJS 不需要寫 code，就能達到需求！」（很重要說三次）
這代表了什麼？
客戶的畫面需求不會只是一個簡單的輸入與輸出，通常一個簡單的表單會是10個以上的 input，這個時候會發生什麼事情呢？
使用JavaScript會發生的問題
- 繁複的 DOM 操作（註1）
- 難以維護
- 顧此失彼
畫面上的 UI 互動越多，就會需要越多的 DOM 操作，也會導致 Code 行數越來越多
同樣的，程式行數越多，就會越來越難以維護
難以維護的程式，一旦需求改變，要去修改以前的程式就會顧此失彼，有如大海撈針
註1：「DOM 操作」指瀏覽器 (Browser) 會建置 HTML 物件模型，而對於整個模型做元素（包含文件 ( document )、元素 ( element )、事件 ( event ) 或是視窗 ( window ) ）的任何動作。
AngularJS 做了什麼？
- 資料雙向綁定（Two-way Data Binding）
透過 AngularJS 的資料雙向綁定，可以很輕鬆的讓使用者輸入的值（value）綁定到 AngularJS 變數上，而當在使用者輸入時，可以立即的更新所有綁定相同變數的位置的資料。
為什麼呢？
所以在 HTML 中使用 {{ AngularJS 變數 }} 來呈現相同的變數資料
也因為這樣的特性，使得 JavaScript 程式可以寫的非常精簡！
*小提示：在 HTML 中使用兩個中括號 {{}} 表示 AngularJS 的變數。
OnlineDemo -- 此為上方程式的 Demo 程式，提供大家參考。
使用 AngularJS 的理由
- 在 JavaScript Framework 的群雄並起的時代，AngularJS 獨樹一格，走出一條與眾不同的風格。
- 由 Google 撐腰，不用擔心學了之後未來有瀏覽器不支援的問題。
如果未來的案子由你來開發維護，而你也想要改變繁複的 DOM 操作，那麼我推薦你使用它！
你就會看到那一道光～～！（大誤
 |
| 馬賽克處理以保護當事人 |
重點複習
- AngularJS 由 Google 開發
- AngularJS 的優點：
- 好維護
- 有效的減少程式碼複雜度
那麼，我們下次見囉！