[AngularJS]AngularJS 入門教學 - 宣告式語法的使用方式

AngularJS 利用宣告式語法(Directives Syntax)來加強擴充 HTML 本身功能的不足，像最基本的 ng-app、ng-controller 或 ng-model 都是宣告式語法(Directives Syntax)的一種。

內建的宣告式語法(Directives Syntax)很多都跟元素事件或是顯示相關，所以筆者比較偏好稱它為"指令"。

而這些宣告式語法(Directives Syntax)的宣告是採用駝峰式(Camel-Case)的命名方式，例如 ngModel。但在使用時需要將駝峰式(Camel-Case)改成使用冒號(:)、連接號(-)及下劃線(_)，或者使用 x- 來跟一般屬性有較明顯的區隔。不過也配合 HTML5 中針對自訂屬性的規範，所以使用 data- 也是可以的。

筆者準備一個簡單的資料綁定的方式來讓各位驗證一下(JSBin)：

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

<div class="well span6" style="margin-top:20px;">
	<input type="text" ng-model="name" placeholder="name" />
 
	<div>
		<b>ngBind="name"：</b>
		<span ngBind="name"></span>
	</div>
	<div>
		<b>ng-bind="name"：</b>
		<span ng-bind="name"></span>
	</div>
	<div>
		<b>ng:bind="name"：</b>
		<span ng:bind="name"></span>
	</div>
	<div>
		<b>ng_bind="name"：</b>
		<span ng_bind="name"></span>
	</div>
	<div>
		<b>x-ng-bind="name"：</b>
		<span x-ng-bind="name"></span>
	</div>
	<div>
		<b>data-ng-bind="name"：</b>
		<span data-ng-bind="name"></span>
	</div>
</div>

筆者將 ng-bind 搭配各種使用方式一一展示，當我們在輸入方塊中輸入值時：

除了使用 ngBind 的沒任何反應之外，其它的都會跟著輸入。

既然有這麼多種使用方式，各位可以擇一來使用即可。如果是要能通過像是 W3C 一些的標準驗證的話，那麼使用 data-* 是個不錯的選擇喔。最後請各位將 AngularJS 入門教學 - ngRepeat (一) 的作業拿出來改成使用 data- 的方式來當練習吧！