在網路上看到一個前端的JS框架:Angular,是由Google維護。
透過「宣告」(Directives Syntax) 來達成JS的動作。
Angular有幾項優點:
宣告式語法 (Directives)
DOM Templates
雙向資料繫結 (Two Way Data-Binding)
相依性注入 (Dependency Injection)
MVC
這次我自己測試的是雙向資料連結的功能,網頁語法如下,
整個內容只有看到引入angular.min.js的<script>語法,
其他都是以宣告的方式加入HTML的語法內,如:
<html ng-app>、{{week}}等。
-------------------------------------------------------
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular Testing</title>
<script src="angular.min.js"></script>
</head>
<body>
<p>你出生在星期幾?</p> <br />
請選擇:
<select ng-model="week" ng-init="week = '星期一'">
<option>星期一</option>
<option>星期二</option>
<option>星期三</option>
<option>星期四</option>
<option>星期五</option>
<option>星期六</option>
<option>星期日</option>
</select>
<br />
自行輸入:
<input type="text" ng-model="week" > <br />
<p>你選擇的是星期{{ week }},是否正確?</p>
</body>
</html>
------------------------------------------------------
放到瀏覽器上測試,只要改變下拉的值,其他串week都會改變。
在下拉選單變為星期三,「自行輸入」也會變為星期三,
在「自行輸入」打入星期二,下拉選單也會自動變為星期二。