最近開始研究 AngularJS 以後，覺得它能輕鬆做到 『資料綁定』 的這一點真是太猛啦!!
參考 AngularJS 在維基百科有簡單的介紹資料綁定的部分： Angular在呈現和資料中間，可以簡單建立雙向的資料綁定。一旦建立雙向綁定，使用者輸入，會由Angular自動傳到一個變數中，再自動讀到所有綁到它的內容，更新它。效果上就是立即的資料同步。在程式碼中修改變數，也會直接反應到呈現的外觀上。不僅內容可以雙向綁定，其他諸如類別、寬度、高度等等，都可以和變數與使用者的輸入，綁定起來。
實際來做看看每次必做的 Hello World! 了解一下最基本的運用方式!
做完的效果就如下所示：
兩個對話方塊輸入的資料會綁定在下面的 h1 標籤內容，都沒輸入資料的話，預設文字就是 Hello World!
當你輸入資料的時候，修改資料的同時就會直接反應在 h1 的文字上，做到即時更新。
利用 AngularJS，很快就可以做到這個效果，接下來就一步一步的做給大家看。
首先建立一個簡單的 html 。
1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
</head>
<body>
</body>
</html>
接著把 AngularJS 引用進來，為了讓樣式好看些，額外再引用了 bootstrap 的樣式。
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
</body>
</html>
接著就是幫這個 html 標籤 加上 ng-app 的屬性，這樣做是讓 AngularJS 載入後知道要處理的範圍。
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
</body>
</html>
再來把需要用到的 html 標籤補上去，簡單的內容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<div class="well span6">
<label>Message</label>
<input type="text" placeholder="Enter a message here">
<label>Name</label>
<input type="text" placeholder="Enter a name here">
<hr>
<h1>Hello World!</h1>
</div>
</body>
</html>
接著就能利用 AngularJS 強大的 ng-model 來進行資料綁定的部分了，我們先幫 input 標籤加上 ng-model 的屬性，並且給這個屬性值，輸入 message 的 input 的 ng-model 屬性值就給他叫做 message, 而輸入 name 的 input 的 ng-model 屬性值就給叫做 name，這樣比較簡單易懂，而這邊的 ng-model 的屬性的值，就把它當成是你自己命名的變數名稱，而這個名稱就可以拿來對應再要綁定資料的地方。
我們希望輸入的資料會綁定在 <h1> 上面， 因此我們就要運用到 AngularJS 的表達式。 <h1> 標籤的內容，我們就可以加上 {{}}兩個大括弧，中間放要綁定的 ng-model 屬性的值，就像這樣 {{message}}。
修改完後的程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<div class="well span6">
<label>Message</label>
<input type="text" ng-model="message" placeholder="Enter a message here">
<label>Name</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<hr>
<h1>{{message}} {{name}}</h1>
</div>
</body>
</html>
做到這裡，在 message 的對話框輸入的內容，已經會綁定在 <h1> 標籤裡面的 {{message}}，而在 name 的對話框輸入的內容，已經會綁定在 <h1> 標籤裡面的 {{name}}。
當都沒有輸入資料的時候， h1 空空的好像怪怪的，還沒有輸入任何資料的時候，能不能加上預設值呢?
只要在 {{message}}中再加上 {{ message || “Hello” }}，這樣預設 h1 一開始就會顯示出 Hello 的字串， 也幫 name 的部份加上預設值 {{ name || “World!” }}，這樣就完成了，完整程式碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS - Hello World!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<style>
body{
text-align:center;
color:#fff;
}
.well{
background-color:#333;
}
</style>
</head>
<body>
<div class="well">
<label>Message</label>
<input type="text" ng-model="message" placeholder="Enter a message here">
<label>Name</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<hr>
<h1> {{ message || "Hello" }} {{ name || "World!" }}</h1>
</div>
</body>
</html>
運用 AngularJS 快速的就能做到資料綁定，快點一起試試看這個簡單的例子吧!
程式碼連結：
