AngularJS - 指令：初學者指南

你好，未來的AngularJS法師！今天，我們將踏上一段令人興奮的旅程，探索AngularJS指令的世界。別擔心你對編程還是新手——我將成為你的友好指南，一步步解釋一切。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們一起來深入探討！

AngularJS - Directives

指令是什麼？

在我們開始之前，讓我們先了解一下指令是什麼。可以把指令想像成我們給HTML的特殊指示。它們就像魔法咒語，讓我們的網頁充滿活力，呈現出動態內容和行為。酷炫吧？

現在，讓我們探討一些AngularJS中最常見的指令。

ng-app 指令

ng-app 指令就像我們AngularJS房子的基礎。它告訴AngularJS，“嘿，這裡是我的應用程序開始的地方！”

示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>歡迎來到我的AngularJS應用程序！</p>
</body>
</html>

在這個示例中，我們將 ng-app 添加到了 <body> 標籤。這告訴AngularJS，<body> 內容都是我們AngularJS應用程序的一部分。

ng-init 指令

ng-init 指令就像魔術師的帽子——它讓我們可以直接在HTML中初始化變量。這對於簡單的演示來說非常好，但在實際應用程序中，我們通常會在控制器中初始化數據。

示例：

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>名字是 {{ firstName + " " + lastName }}</p>
</div>

在這裡，我們使用 ng-init 設置 firstName 和 lastName 的值。然後，我們使用AngularJS表達式（那對雙括號）來顯示這些值。

ng-model 指令

ng-model 指令就像一條雙向街道，連接你的HTML和應用程序數據。它可以：

將輸入框、下拉選單或文本區域綁定到作用域上的屬性
為應用程序數據提供類型驗證
為元素設置CSS類
將HTML元素綁定到表單驗證

示例：

<div ng-app>
<input type="text" ng-model="name">
<p>你好，{{ name }}！</p>
</div>

在這個示例中，無論你在輸入框中輸入什麼，都會立即出現在段落下面的“你好，”之後。這就像魔法，但這只是 ng-model 的力量！

ng-repeat 指令

ng-repeat 指令就像HTML元素的影印機。它可以为数组中的每个项目重复一组HTML元素。這對於動態創建列表或表格非常有用。

示例：

<div ng-app ng-init="fruits=['蘋果', '香蕉', '橙子']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

這將創建一個水果列表。ng-repeat 指令將為我們數組中的每個水果重複 <li> 元素。

一個綜合示例

現在，讓我們將所有這些指令放在一個更複雜的示例中：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>學生成績追蹤器</h2>
<table border="1">
<tr>
<th>名字</th>
<th>成績</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>添加新學生</h3>
<form>
名字： <input type="text" ng-model="newName"><br>
成績： <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">添加學生</button>
</form>
</body>
</html>

讓我們分解一下：

我們從 <body> 標籤中的 ng-app 開始初始化我們的AngularJS應用程序。
我們使用 ng-init 創建一個初始的學生數組。
我們使用 ng-repeat 為每個學生創建表格行。
我們使用 ng-model 將輸入字段綁定到變量。
我們使用 ng-click（一個新的指令！）當按鈕被點擊時，將新學生添加到我們的數組中。

這個示例展示了這些指令如何一起工作，創建一個動態、互動的網頁應用程序。你可以添加新學生，他們會立即出現在表格中！

結論

恭喜你！你剛剛踏出了進入AngularJS指令世界的第一步。我們已經介紹了 ng-app、ng-init、ng-model 和 ng-repeat 的基礎。這些只是AngularJS提供的許多指令中的一小部分，但它們是一個很好的開始。

記住，學習編程就像學習一種新語言。這需要時間和練習，但在你意識到之前，你將流利地“說”AngularJS！繼續實驗這些指令，嘗試以不同的方式將它們組合起來，最重要的是，玩得開心！

未來的AngularJS大師，快樂編程！

Credits: Image by storyset