AngularJS - Todo Application

您好，有志者！今天，我們將要踏上一段令人興奮的旅程，進入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為真時，這將應用'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