[Angular.js 學習筆記] AngularJS 概述

AngularJS 是一個使用 HTML、CSS 和JavaScript 來建立 Web 應用程式的前端框架（Framework），其由 Google 所負責維護，常用於建立CRUD類或單頁網頁程式應用（SPA）的開發上（若程式涉及大量的DOM操作則不建議使用）。

其中在學習Angular的過程中必須先暫時放棄舊有的jQuery開發觀念，建立新的開發習慣，以下簡單介紹Angular.js的重要特性和觀念：

1. HTML（DOM）當成 Template 來使用
過去在開發多頁面應用時，多半為伺服器端將HTML和模版數據建立完成再發送到瀏覽器顯示。而Angular則是在客戶端將模版和數據進行配置，讓伺服器端僅為客戶端提供靜態資源。

以下為範例：
（注意需先引入Angular.js和宣告ng-app於欲控制範圍，此處為整個html，ng-controller則描述JS所使用的Controller和scope作用範圍）

JS Bin

從這個範例中可以觀察到和過去開發JavaScript應用程式方式的差異：
(1) 在HTML中未設置Class或Id註冊當做事件監聽器
(2) 不用註冊監聽器或是使用Callback函數來更改DOM
(3) Controller是一個JavaScript的函數（建構式），毋須繼承Angular所提供的函數和變數
(4) 不用事先建立$scope物件，即可以當做參數傳入使用（Dependency Injection ）
(5) 不用呼叫Controller的建構式

2. Model View Controller （MVC）
MVC是一種源自於Smalltalk的一種開發架構，目前已經廣泛應用於各大開發環境中。其背後理念為：將管理資料的模型（Model）、邏輯（Controller）和使用者介面的（ View）能夠清楚的分開，利於管理、擴展和維護。

在Angular中，也同樣也使用了MVC這樣的開發觀念（後端可用MVC，前端也可以），View指的是DOM（Document Object Model），Controller則是指JavaScript的函數建構式（類別），而Model則對應到物件的屬性。

其中Controller為連結Model和View的關鍵橋樑：

Controller are where we define our app's behavior by defining functions and values.

以下範例說明Controller用法：
JS Bin

3. 資料繫結（Data Binding）　
這是Angular蠻特別的一個特色，因為一般我們在開發網頁應用程式時，多半會由後端直接將資料印到HTML中。若是單頁應用程式，則是使用Ajax和後端進行溝通，以不刷頁的方式呈現（提高使用者經驗）。以jQuery的作法來說，會將Ajax成功所獲得的資料利用innerHTML的屬性塞到DOM中，但若是面對需要把最新的資料插入使用者介面或是根據使用者的輸入同步更新顯示數據的話將需要花很大的功夫才能達到預期的效果。

而Angular透過引入資料繫結（Data Binding）的概念，將資料映射於JavaScript的物件屬性，讓使用者介面的資料可以同步更新。

以下為範例：
JS Bin

4. 依賴注入（Dependency Injection ）
在Angular中，當我們希望使用如$scope等物件連接View和Controller時，我們僅是將$scope當做參數傳入Controller中即可以使用，不用再特別建構物件，這就是依賴注入的具體展現。簡言之，Angular提供許多功能可以直接使用，不需要特別重新建立（如：想操作URL的話可以使用$location）。

5. 指令（Directives）

A Directive is a marker on HTML tag that tells Angular to run or reference some JS code. Directives allow you to write HTML that expresses the behavior of your app.

Angular中一大特色就是可以將模版（template）寫成HTML的形式，運用強大的DOM轉換引擎，擴展HTML的能力。

例如我們在上面看到的ng-app（說明Angular所要控制的範圍）、ng-controller（設定監聽View的範圍和所使用的Controller）、ng-model（對應Data和Model的屬性）等，皆非HTML本來就具備的屬性，而是透過Angular去增強HTML的能力。這些都是Angular所內建的指令之一，然而你也可以自行編寫屬於自己的指令。

6. 表達式（Expressions）

Allow you to insert dynamic values into HTML.

表達式可以讓你動態改變插入HTML的值，一般可以分為Numerical（數字）和String（字串）值和簡單的運算（比較運算子、布林運算、數學運算、位元運算等），更可以使用$scope物件所露出的函數（{}、[]、.），不過盡量不要將商業邏輯放在View中。

此外，仍要注意的是，顯示變數在HTML上的方法除了用簡便的花括號{{}}外，也可以用ng-bind指令來輸出內容，使用後者可以避免在Angular資料尚未載入前，讓使用者看到尚未渲染好的模版。

以下為範例：
JS Bin

7. 過濾（Filter）
使用過濾器可以宣告表達式該如何變化數據的格式，再顯示到使用者介面上。使用格式如下：

{{data | filter format:options}}

一般Filter有多種格式和用法：
1. currency
2. date
3. filter
4. json
5. limitTo
6. lowercase / uppercase
7. number
8. orderBy

範例如下：
JS Bin

8. 模組（Modules）
隨著應用程式的規模越來越大，我們需要有更好維護的架構，此時適時的引入Module的觀念可以讓程式碼可以更容易維護、閱讀和測試，並定義模組之間的相依性。

以下為範例：
JS Bin

這篇文章只是一個簡單的開頭（若之前有學習過jQuery或是傳統JavaScript應用的朋友或許會有點挫折，事實上Angular所代表的只是另外一種開發的觀念和門派，很重要的是個人接受的程度），接下來的文章將更深入介紹Angular的各個特性。另外，若有興趣學習Angular的朋友建議可以參考以下文件，並推薦使用Shaping up with Angular.js（CodeSchool互動教學）實際編寫程式！


Angular.js參考文件：
1. ng-newsletter
2. 邊學AngularJS邊做Todo List
3. Day30- 入門AngularJS筆記
4. egghead.io
5. AngularJS 開發實戰：解析 angular-seed 專案架構與內容
6. AngularJS开发指南（中國大陸社區）
7. Angular.js官方網站
8. 保哥Angular文章
9. AngularJS 入門簡介
10. AngularJS 簡介- OpenFoundry
11. AngularJS 指令- OpenFoundry
12. AngularJS @ DevWeek 2014
13. 利用 Generator-angular 來建立一個 AngularJS 專案
14. Angular.js學習筆記
15. Angular.js官方教學 
16. Kytu分享
17. AngularJS 開發 ASP.NET MVC -twMVC#9
18. AngularJS 開發實戰：解析 angular-seed 專案架構與內容