📅 最后修改于: 2023-12-03 15:27:55.359000 🧑 作者: Mango
角度指令（英文名：AngularJS）是一种流行的JavaScript框架，它由Google公司创建和维护。它旨在通过提供更简单的编程方式来简化Web应用程序的开发。角度指令使开发者能够使用HTML作为构建应用程序的声明式语言，并使用JavaScript来添加逻辑。
在本文中，我们将介绍如何在JavaScript中使用角度指令。
在使用角度指令之前，我们需要将其添加到项目中。可以通过以下两种方式之一来完成这一目标：
直接下载
可以在 AngularJS 官方网站 上下载AngularJS 的压缩文件。在将其添加到项目中后，您可以启动应用程序。
使用npm
如果您使用npm作为JS包管理器，则可以使用以下命令来安装AngularJS：
$ npm install angular
在应用程序中使用角度指令的第一步是将其添加为依赖项。在我们的JavaScript文件中，我们需要在文件开头使用以下代码进行注入：
var myApp = angular.module('myApp', []);
上述代码将创建一个名为myApp的模块，并将角度指令添加为其依赖项。然后，我们可以在该模块中使用角度指令提供的各种功能。
以下是使用角度指令创建一个简单的Todo列表的示例：
<!doctype html>
<html ng-app="myApp">
<head>
<title>Todo List</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
<h1>Todo List</h1>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('TodoCtrl', function($scope) {
$scope.todos = [
{ text: 'learn angularjs', done: false },
{ text: 'build an angularjs app', done: false }
];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
});
</script>
</body>
</html>
在上述代码中，我们首先定义一个名为myApp的模块，并将其注入到HTML文档中。然后，我们使用myApp.controller方法创建一个控制器来处理我们的Todo列表。我们在控制器中定义了一个可以被视图访问的todos数组，以及一个可以添加新Todo项的addTodo函数。
在视图中，我们使用ng-repeat指令将todos数组中的每个项呈现为列表项。我们还使用ng-submit指令在按下“添加”按钮或按下回车键时调用addTodo函数。此外，我们使用ng-model指令将输入元素绑定到作用域中的变量。
在本文中，我们介绍了如何在JavaScript中使用角度指令框架。我们了解了如何将角度指令添加为项目依赖项，并使用它创建了一个简单的Todo列表。希望这种介绍能够帮助您开始使用角度指令构建更好的Web应用程序!