Angular 雙向資料繫結的測試

在網路上看到一個前端的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都會改變。
在下拉選單變為星期三,「自行輸入」也會變為星期三,
在「自行輸入」打入星期二,下拉選單也會自動變為星期二。


Windows 11安裝時跳過網路連線