AngularJS 是一种用于构建动态 Web 应用程序的 JavaScript 框架。它非常适用于单页应用程序的开发，并提供了许多强大的功能来简化开发流程。在本教程中，我们将重点介绍 AngularJS 的两个核心概念：数据绑定和指令。
数据绑定
数据绑定是 AngularJS 的核心之一，它使我们能够将数据模型与视图自动同步。这意味着当数据模型发生变化时，视图会自动更新，反之亦然。让我们通过一个简单的示例来演示数据绑定的功能。
首先，我们需要在 HTML 页面中引入 AngularJS 库：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
接下来，我们可以创建一个 AngularJS 应用程序，并定义一个控制器。在控制器中，我们将定义一个变量来保存我们的数据。在视图中，我们可以使用双大括号({{ }})语法将变量与视图绑定在一起。
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>Hello, {{ name }}!</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'John Doe';
});
</script>
在上面的示例中，我们创建了一个简单的输入框和一个标题。输入框使用了 ng-model 指令来绑定到控制器的 name 变量。当用户在输入框中输入文本时，标题会自动更新展示。
指令
指令是 AngularJS 的另一个重要概念，它允许我们扩展 HTML 元素的行为和功能，以实现更复杂的交互。AngularJS 提供了许多内置的指令，同时还允许我们自定义指令。
我们可以通过使用 ng-repeat 指令来演示指令的使用。ng-repeat 指令允许我们重复一个 HTML 元素或一组元素，基于我们的数据模型。让我们通过一个示例来演示 ng-repeat 的用法：
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="fruit in fruits">{{ fruit }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fruits = ['Apple', 'Banana', 'Orange'];
});
</script>
在上面的示例中，我们创建了一个包含水果列表的 ul 元素。使用 ng-repeat 指令，我们可以将每个水果重复显示在列表项 li 中。
总结
这篇博客介绍了 AngularJS 的基础知识，包括数据绑定和指令的使用。数据绑定使我们能够自动同步数据模型和视图，而指令允许我们扩展 HTML 元素的功能和行为。通过学习这些基础知识，我们可以更好地开始使用 AngularJS 构建动态的 Web 应用程序。
希望本教程对于你学习 AngularJS 有所帮助！如果你有任何问题或建议，请随时与我联系。
原文链接：AngularJS Basics: Data Binding and Directives Usage
本文来自极简博客，作者：数据科学实验室，转载请注明原文链接：AngularJS基础教程: 数据绑定与指令使用
