AngularJS - 指令：初学者的指南
你好，未来的AngularJS法师们！今天，我们将踏上一段激动人心的旅程，探索AngularJS指令的世界。如果你是编程新手，不用担心——我会成为你友好的向导，一步步解释所有内容。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们一起深入了解一下！
指令是什么？
在我们开始之前，让我们了解一下指令是什么。可以把指令想象成我们给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>在这个例子中，我们在 <body> 标签中添加了 ng-app。这告诉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（一个新的指令！）在点击按钮时将新学生添加到数组中。
这个示例演示了这些指令如何一起工作来创建一个动态的、交互式的Web应用程序。你可以添加新学生，他们会立即出现在表格中！
结论
恭喜你！你已经迈出了进入AngularJS指令世界的第一步。我们已经涵盖了 ng-app、ng-init、ng-model 和 ng-repeat 的基础知识。这些只是AngularJS提供的众多指令中的一小部分，但它们是一个很好的起点。
记住，学习编程就像学习一门新语言。它需要时间和练习，但很快你就能流利地“说”AngularJS了！继续尝试这些指令，尝试以不同的方式组合它们，最重要的是，享受乐趣！
未来AngularJS大师们，祝你们编程愉快！
Credits: Image by storyset