AngularJS - 訂單表單：初學者指南

你好啊，未來的 AngularJS 巫師們！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 訂單表單的世界。別擔心如果你之前從未寫過一行代碼——我們將從最基本的開始，然後逐步學習。在這個教學結束時，你將能夠像專業人士一樣創建動態的訂單表單！

AngularJS - Order Form

什麼是 AngularJS？

在我們深入訂單表單之前，讓我們花一分鐘時間來了解 AngularJS 是什麼。想像你正在蓋一個房子。HTML 就像磚頭和灰泥，CSS 是油漆和裝飾，那麼 AngularJS 呢？嗯，這就像一個智能家園系統，讓一切變得互動和動態。

AngularJS 是一個 JavaScript 框架，它為 HTML 添加了新的屬性，使其成為創建動態網頁應用的理想選擇。這就像是給了你原本靜態的 HTML 超能力！

建立我們的專案

首先，讓我們建立我們的專案。我們需要在 HTML 文件中包含 AngularJS 的庫。這樣做：

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>我的 AngularJS 訂單表單</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 我們的表單將放在這裡 -->
<script src="app.js"></script>
</body>
</html>

在這段代碼中，我們做了幾件重要的事情：

我們在 <html> 標籤中添加了 ng-app="orderApp"。這告訴 AngularJS 這是我們應用的根元素。
我們使用 <script> 標籤包含了 AngularJS 的庫。
我們還包含了我們自己的 JavaScript 文件（app.js），我們將在其中寫入 AngularJS 代碼。

創建我們的 AngularJS 模块和控制器

現在，讓我們創建 app.js 文件並設置我們的 AngularJS 模块和控制器：

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

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

這裡發生了什麼：

我們創建了一個名為 'orderApp' 的 AngularJS 模块。
我們定義了一個名為 'OrderController' 的控制器。
在控制器內部，我們在 $scope 上初始化了一個 order 物件。這個物件將持有我們的訂單項目和總額。

建立訂單表單

現在，讓我們在 HTML 中創建訂單表單：

<div ng-controller="OrderController">
<h2>下訂單</h2>
<form>
<label>項目名稱: <input type="text" ng-model="newItem.name"></label><br>
<label>價格: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">添加項目</button>
</form>

<h3>訂單摘要</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">移除</button>
</li>
</ul>
<p>總計: ${{order.total}}</p>
</div>

讓我們分解這些內容：

我們使用 ng-controller 來將這部分與我們的 OrderController 相關聯。
我們有輸入項目名稱和價格的輸入字段，使用 ng-model 來將它們绑定到 newItem.name 和 newItem.price。
我們有一個 "添加項目" 按鈕，當點擊時會調用 addItem() 函數。
我們使用 ng-repeat 來顯示訂單中的每個項目。
每個項目都有一個 "移除" 按鈕，當點擊時會調用 removeItem() 函數。
我們顯示訂單總額。

實現控制器邏輯

現在，讓我們在我們的控制器中添加必要的函數：

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

每個函數的作用如下：

addItem()：添加一個新項目到訂單，計算新的總額，並重置輸入字段。
removeItem()：從訂單中移除一個項目，並重新計算總額。
calculateTotal()：計算訂單中所有項目的價格總和。

提升用戶體驗

為了使我們的表單對用戶更加友好，讓我們添加一些驗證：

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>項目名稱: <input type="text" ng-model="newItem.name" required></label><br>
<label>價格: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">添加項目</button>
</form>

並更新我們的控制器：

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

這些變更：

添加表單驗證，確保所有字段都已填寫，並且價格是正數。
當表單無效時禁用 "添加項目" 按鈕。
只有在表單有效時才添加項目。
在添加項目後將表單重置為原始狀態。

結論

恭喜你！你剛剛建立了一個功能完整的 AngularJS 訂單表單。我們已經涵蓋了 AngularJS 的基礎，包括模塊、控制器、雙向數據綁定和表單驗證。記住，熟能生巧，所以不要害怕對這個表單進行實驗和擴展。也許添加一個折扣功能或者保存訂單的能力？可能性無限！

這裡是一個總結我們使用的主要 AngularJS 指令的表格：

指令	目的
ng-app	定義 AngularJS 應用的根元素
ng-controller	為應用的一部分指定控制器
ng-model	創建雙向數據绑定
ng-click	指定當元素被點擊時運行的函數
ng-repeat	為集合中的每個項目重複元素
ng-submit	指定當表單被提交時運行的函數
ng-disabled	根據條件禁用元素

開心地編程，並記住——每個專家都曾經是初學者。持續練習，你將會在沒有時間內成為 AngularJS 的主人！

Credits: Image by storyset