AngularJS - 待办事项应用

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，进入AngularJS的世界，通过构建一个简单但强大的待办事项应用。作为你友好的计算机科学老师，我很高兴引导你完成这个过程，即使你之前从未写过一行代码。所以，拿起你最喜欢的饮料，舒舒服服地坐好，让我们一起开始吧！

AngularJS - ToDo Application

AngularJS是什么？

在我们开始编码之前，让我们花点时间了解一下AngularJS是什么。想象你正在建造一栋房子。HTML将是基础和墙壁，CSS将是油漆和装饰，JavaScript将是电力和管道。AngularJS就像一个超级高效的建筑队，帮助你以聪明、有组织的方式将这些元素组合在一起。

AngularJS是一个强大的JavaScript框架，它扩展了应用程序的HTML词汇。它特别擅长构建动态的单页应用程序。

设置我们的项目

首先，让我们设置我们的项目。我们需要三个文件：

index.html（我们的主HTML文件）
app.js（我们的AngularJS应用程序）
style.css（我们的样式表）

让我们从我们的HTML文件开始：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>我的待办应用</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>我的待办事项列表</h1>
<!-- 我们稍后会增加更多内容 -->
</body>
</html>

让我们分解一下：

ng-app="todoApp"：这告诉AngularJS这是我们的应用的根元素。
ng-controller="TodoController"：这指定了应该为这部分应用使用哪个控制器。
我们从CDN中包含了AngularJS，并链接了我们的app.js和style.css文件。

创建我们的AngularJS应用程序

现在，让我们在app.js中创建我们的AngularJS应用程序：

var app = angular.module('todoApp', []);

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: '学习AngularJS', done: false},
{text: '构建一个应用', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

这里发生了什么：

我们创建了一个名为'todoApp'的AngularJS模块。
我们定义了一个名为'TodoController'的控制器。
在控制器内部，我们创建了一个待办事项数组和一个添加新待办事项的函数。
$scope就像是我们HTML和JavaScript之间的桥梁。它允许我们在HTML中访问变量和函数。

显示我们的待办事项

让我们更新我们的HTML以显示我们的待办事项：

<body ng-controller="TodoController">
<h1>我的待办事项列表</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="添加一个新待办事项">
<input type="submit" value="添加">
</form>
</body>

让我们分解一下：

ng-repeat="todo in todos"：这为我们的todos数组中的每个待办事项创建一个新的<li>。
ng-model="todo.done"：这将复选框绑定到待办事项的'done'属性。
ng-class="{'done': todo.done}"：当todo.done为true时，这应用'done'类。
{{todo.text}}：这显示我们的待办事项文本。
ng-submit="addTodo()"：当表单提交时，这调用我们的addTodo函数。
ng-model="newTodo"：这将输入绑定到控制器中的newTodo变量。

为我们的应用添加样式

最后，让我们在style.css中添加一些基本样式：

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

这个CSS将使我们的应用看起来干净整洁。

结论

恭喜你！你刚刚构建了你的第一个AngularJS应用程序。下面是一个表格，总结了我们使用的主要AngularJS概念：

概念	描述
ng-app	定义AngularJS应用的根元素
ng-controller	指定HTML元素应该使用哪个控制器
ng-repeat	为数组中的每个项目重复一个HTML元素
ng-model	将输入、选择或文本区域绑定到作用域上的属性
ng-submit	指定在表单提交时运行的函数
ng-class	动态应用CSS类

记住，学习编码就像学习一门新语言。这需要时间和练习，但只要坚持不懈，你很快就能构建复杂的应用程序。继续编码，继续学习，最重要的是，享受乐趣！

Credits: Image by storyset