asp.net: [Javascript]AngularJS 框架介紹

一個由 Google 傾力打造的前端 JavaScript 框架，與其他 JS 框架最大的不同在於，他直接延伸現有的 HTML 架構，透過宣告式語法 (Directives Syntax) 直接賦予 HTML 額外的超能力，讓 Web 應用程式在元件化的過程變得極其簡潔有力。

AngularJS 所提供的雙向資料繫結 (Two Way Data-Binding) 特性，可以說是最酷最實用的功能之一，但這個特性並不是 AngularJS 所獨有，其他 JS 框架也大多都有此特性，不過對於沒有接觸過其他框架的人來說，確實是一個非常酷炫有趣的功能之一。

與其他所有的 JS 框架一樣，這個世界沒有銀子彈，不會有任何一套框架可以解決所有問題，當然這套 AngularJS 也不例外。所以，要能理解 AngularJS 所擅長與不擅長的領域，可以有助於你評估與理解是否要採用 AngularJS 當作你未來的開發框架。

每個有寫過幾年 Web 開發經驗的人 (無論甚麼程式語言)，心中都會有一套自己的開發架構，也就是處裡那些繁瑣的 CRUD (新增、查詢、修改、刪除)等操作，你也許可以自己回想一下，在我們歷年來的各種大大小小的網站，那個網站不是都在處理這些類型的資料。以網站前台來說，是不是大多都是從資料庫讀取資料，然後呈現在頁面上？再以網站後台來說，大多也都是資料的新刪查改 (新增、刪除、查詢、修改)。但在這之前，沒有人會限制你怎麼做，但是 AngularJS 卻是規定你要怎麼做，用 AngularJS 所設計的方式來做，而且 AngularJS 的設計團隊相信，這就是實作 CRUD 最好的方式。

所以，除了 CRUD 類型以外的 Web 應用程式，AngularJS 幾乎可以說是英雄無用武之地，例如你要設計複雜的 Web 遊戲或是開發那些必須要精細控制 DOM 物件的應用程式，都不應該用 AngularJS 來做。

AngularJS 提供一套高度抽象化的架構來簡化 CRUD 類型的 Web 應用程式開發，你必須要先了解它的開發習慣，才能理解到底應該怎樣開發 AngularJS 程式，以下我就先用一個基本的例子，帶領大家快速上手，我會以 JS Bin (http://jsbin.com/) 網站當作示範，各位不用註冊會員就可以利用 JS Bin 快速體驗 AngularJS 的魅力。

1.連到 http://jsbin.com/ 網頁，先點擊 Add Library 並加入 Angular 的穩定版本，如下圖示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>  
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

2. 在 <html> 標籤上，加上一個 ng-app 屬性

這就是所謂的宣告式語法 (Directives)，以 ng-app 來說，這是用來宣告整份 html 都屬於 AngularJS 的管轄！

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

3. Angular 表達式 (Angular Expressions)

Angular 表達式是一個長得很像 JavaScript 的語法，但又不全然是 JavaScript，至少你不能把它當成 JavaScript 來看待，只是語法相近而已，且 Angular 表達式會用 {{ 與 }} 包起來，例如：{{ 1 }}

接著請你在 JS Bin 的 <body> 標籤裡，加上以下 Angular 表達式，先去體會一下：

執行結果:

4. AngularJS 的 Filter 特性 (Understanding Angular Filters)

Angular Filters 可以修飾或過濾 Angular 表達式輸出的內容，這裡我簡單列出幾個例子，先去體會一下：

執行結果:

5. 資料繫結 (Data Binding)

在 AngularJS 裡，所有在 View 與 Controller 之間，都是透過 Model 來做資料傳遞，無論你在 View 這端透過表單元素修改了內容，或是在 Controller 這端修改了 Model 內容，兩邊都會即時發生變化，因為在 AngularJS 框架中會監控 (watch) Model 物件的任何變化，並隨時反映到 View 上面，這就是雙向資料繫結。

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  數量: <input type="number" ng-model="quantity" ng-init="quantity = 1">
  <br>
  單價: <input type="number" ng-model="price" ng-init="price = 299">
  <br>
  總價: {{ quantity * price }}
</body>
</html>

在上述語法中，有兩個 input 欄位，都被 ng-model 屬性宣告成了 Model，屬性值中設定的事 Model 的變數名稱。不過，如果你試圖在 input 標籤設定 value 屬性與值，其屬性值並不會顯示在欄位裡，這是因為目前這個 input 欄位已經受到 Angular 所控制，所以欄位中的 value 一定會跟所設定的 Model 繫結，當 quantity 與 price 這兩個 Model 都沒有預設值時，因為雙向繫結的關係，會導致欄位並不會出現任何資料，這才需要透過 ng-init 來指定 Model 的預設值。

Google Code Prettify

[Javascript]AngularJS 框架介紹