日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 注文フォーム：初心者向けガイド

こんにちは、未来のAngularJS魔法使いさんたち！今日は、AngularJSの注文フォームの世界に興味深い旅を始めます。これまでに一行もコードを書いたことがない人も心配しないでください。私たちは非常に基本的なところから始めて、段階的に進めていきます。このチュートリアルの最後には、プロのように動的な注文フォームを作成できるようになります！

AngularJS - Order Form

AngularJSとは？

注文フォームに取り掛かる前に、まずAngularJSとは何かを理解しましょう。家を建てていると考えてみてください。HTMLはレンガとモルタル、CSSはペンキと装飾、そしてAngularJSは？そう、すべてをインタラクティブで動的になるようするスマートホームシステムのようなものです。

AngularJSは、HTMLに新しい属性を追加して拡張するJavaScriptフレームワークで、動的なウェブアプリケーションを作成するのに最適です。これにより、通常の静的なHTMLにスーパーパワーを与えることができます！

プロジェクトの設定

まず第一に、プロジェクトを設定しましょう。AngularJSライブラリをHTMLファイルに含める必要があります。以下のようにします：

<!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>

このコードでは、いくつか重要なことを行っています：

  1. <html>タグにng-app="orderApp"を追加しています。これは、AngularJSにこの要素がアプリケーションのルート要素であることを伝えます。
  2. AngularJSライブラリを<script>タグで含んでいます。
  3. 自分のJavaScriptファイル（app.js）を含めています。ここにAngularJSのコードを書きます。

AngularJSモジュールとコントローラの作成

次に、app.jsファイルを作成し、AngularJSモジュールとコントローラを設定します：

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

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

以下のようなことが起こります：

  1. AngularJSモジュール名orderAppを作成しています。
  2. OrderControllerという名前のコントローラを定義しています。
  3. コントローラ内で$scopeにorderオブジェクトを初期化しています。このオブジェクトは注文アイテムと合計金額を保持します。

注文フォームの作成

次に、HTMLで注文フォームを作成します：

<div ng-controller="OrderController">
<h2>注文を place してください</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>

以下のように分解します：

  1. ng-controllerを使用して、このセクションをOrderControllerに関連付けています。
  2. アイテム名と価格の入力フィールドを用意し、ng-modelでnewItem.nameとnewItem.priceにバインドしています。
  3. "アイテムを追加"ボタンをクリックするとaddItem()関数が呼び出されます。
  4. ng-repeatを使用して注文の各アイテムを表示しています。
  5. 各アイテムに"削除"ボタンを設け、removeItem()関数が呼び出されます。
  6. 合計金額を表示しています。

コントローラロジックの実装

次に、コントローラに必要な関数を追加します：

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);
};
});

各関数の役割は以下の通りです：

  1. addItem(): 新しいアイテムを注文に追加し、新しい合計を計算し、入力フィールドをリセットします。
  2. removeItem(): 注文中のアイテムを削除し、合計を再計算します。
  3. 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();
}
};

これらの変更点は以下の通りです：

  1. フォームバリデーションを追加し、すべてのフィールドが記入され、価格が正の数であることを確認します。
  2. フォームが無効な場合、"アイテムを追加"ボタンを無効にします。
  3. フォームが有効な場合にのみアイテムを追加します。
  4. アイテムを追加した後、フォームを初期状態に戻します。

結論

おめでとうございます！あなたは機能的なAngularJS注文フォームを作成しました。私たちはAngularJSの基本的な部分、モジュール、コントローラ、双方向データバインディング、フォームバリデーションをカバーしました。練習すれば、完璧になります。このフォームにディスカウント機能や注文の保存機能を追加してみてください。可能性は無限です！

以下は、私たちが使用した主なAngularJSディレクティブの表です：

ディレクティブ 目的
ng-app AngularJSアプリケーションのルート要素を定義します
ng-controller アプリケーションのセクションにコントローラを指定します
ng-model 双方向データバインディングを作成します
ng-click 要素がクリックされたときに実行される関数を指定します
ng-repeat コレクションの各アイテムに対して要素を繰り返します
ng-submit フォームが送信されたときに実行される関数を指定します
ng-disabled 条件に基づいて要素を無効にします

ハッピーコーディング、そして忘れてはならない、すべての専門家もかつては初心者でした。練習を続ければ、すぐにAngularJSのマスターになるでしょう！

Credits: Image by storyset

前のチュートリアル:
AngularJS - 切替メニュー
次のチュートリアル:
AngularJS - 検索タブ