AngularJS 实例：简单的任务管理应用
下面是一个简单的 AngularJS 应用实例，用于管理任务（To-Do List）。该实例展示了如何使用 AngularJS 的控制器、双向数据绑定、指令等功能来构建一个动态的任务管理系统。
1. 基本的 HTML 结构
首先，创建一个 HTML 文件来展示应用界面。我们将通过 AngularJS 的 ng-app 和 ng-controller 来实现应用的功能。
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>AngularJS 任务管理</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="TodoController">
<h1>任务管理</h1>
<!-- 输入新任务 -->
<input type="text" ng-model="newTask" placeholder="输入新的任务" ng-enter="addTask()">
<button ng-click="addTask()">添加任务</button>
<ul>
<!-- 循环显示任务列表 -->
<li ng-repeat="task in tasks">
<span ng-class="{'done': task.completed}">{{ task.name }}</span>
<input type="checkbox" ng-model="task.completed" ng-click="toggleCompletion(task)">
<button ng-click="deleteTask($index)">删除</button>
</li>
</ul>
</div>
<script>
// 定义 AngularJS 模块
var app = angular.module('todoApp', []);
// 定义控制器
app.controller('TodoController', function($scope) {
// 初始化任务列表
$scope.tasks = [];
// 添加任务
$scope.addTask = function() {
if ($scope.newTask) {
$scope.tasks.push({ name: $scope.newTask, completed: false });
$scope.newTask = ''; // 清空输入框
}
};
// 删除任务
$scope.deleteTask = function(index) {
$scope.tasks.splice(index, 1);
};
// 切换任务完成状态
$scope.toggleCompletion = function(task) {
task.completed = !task.completed;
};
});
// AngularJS 的自定义指令 ng-enter（用于回车事件）
app.directive('ngEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown", function(event) {
if (event.which === 13) {
scope.$apply(attrs.ngEnter);
}
});
};
});
</script>
</body>
</html>
2. 解释代码
2.1 AngularJS 模块和控制器
ng-app="todoApp"：这是 AngularJS 应用的标识，表示该页面会使用 AngularJS。ng-controller="TodoController"：为该div元素绑定控制器TodoController，在这个控制器中我们处理应用的逻辑。- 控制器
TodoController定义了以下方法：addTask()：向任务列表中添加一个新的任务。deleteTask(index)：根据索引删除指定的任务。toggleCompletion(task)：切换任务的完成状态（复选框勾选与否）。
2.2 双向数据绑定
ng-model="newTask"：输入框与newTask变量实现双向绑定。当用户输入内容时，newTask变量会更新，反之，若newTask更新，输入框的值也会相应更新。
2.3 显示任务
ng-repeat="task in tasks"：用于循环遍历tasks数组，并动态显示每个任务。ng-class="{'done': task.completed}"：根据任务的completed属性来决定该任务的样式，done类将在任务完成时应用。
2.4 删除任务
- 每个任务旁边有一个“删除”按钮，点击该按钮会调用
deleteTask($index)方法，并删除相应的任务。
2.5 回车添加任务
- 我们自定义了一个指令
ng-enter，用来监听回车键（键码13）。当用户按下回车键时，会触发addTask()方法，从而添加任务。
3. 交互功能
- 用户可以在输入框中输入任务并点击“添加任务”按钮，任务会被添加到任务列表中。
- 用户可以勾选任务的复选框，标记任务完成与否。
- 每个任务旁边有一个删除按钮，用户可以删除指定的任务。
- 用户还可以通过按下回车键来添加任务，增加交互的便捷性。
4. 添加样式
为了让任务管理界面更美观，我们可以添加一些 CSS 来修饰界面。
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
color: #4CAF50;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
padding: 5px;
background-color: #f4f4f4;
border-radius: 5px;
}
.done {
text-decoration: line-through;
color: #888;
}
button {
margin-left: 10px;
background-color: #f44336;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
button:hover {
background-color: #d32f2f;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
5. 总结
- 控制器：我们通过
TodoController控制应用的逻辑，处理任务的添加、删除和切换完成状态等操作。 - 双向数据绑定：AngularJS 的
ng-model实现了输入框与模型（任务）之间的双向数据绑定。 - 自定义指令：
ng-enter指令监听回车键事件，简化了用户交互。 - 动态视图：通过
ng-repeat指令动态显示任务列表，并使用ng-class指令来根据任务的状态应用不同的样式。
通过这个简单的任务管理应用，你可以了解 AngularJS 中如何通过控制器、数据绑定、指令等方式来构建功能丰富的 Web 应用。
发表回复