AngularJSアプリケーション

❮ 前次 ❯

本当のAngularJSアプリケーションを作成する時が来ました。

ショッピングリストを作成する

いくつかのAngularJS機能を使用して、アイテムを追加または削除できるショッピングリストを作成しましょう。

私の買い物リスト

牛乳××
パン××
チーズ××

アプリケーションの説明

ステップ1.はじめに：

と呼ばれるアプリケーションを作成することから始めmyShoppingList、それに名前を付けたコントローラーを追加しmyCtrlます。

productsコントローラは、現在のに名前が付けられた配列を追加し$scopeます。

HTMLでは、ng-repeatディレクティブを使用して、配列内のアイテムを使用してリストを表示します。

例

これまで、配列の項目に基づいてHTMLリストを作成しました。

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

ステップ2.アイテムの追加：

HTMLで、テキストフィールドを追加し、ng-model ディレクティブを使用してアプリケーションにバインドします。

コントローラで、という名前の関数を作成しaddItem、入力フィールドの値を使用して配列addMeに項目を追加します。products

ボタンを追加し、ボタンがクリックされたときに関数ng-clickを実行するディレクティブを指定します。addItem

例

これで、ショッピングリストにアイテムを追加できます。

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>

ステップ3.アイテムの削除：

また、ショッピングリストからアイテムを削除できるようにしたいと考えています。

コントローラーで、removeItem削除するアイテムのインデックスをパラメーターとして受け取る、という名前の関数を作成します。

HTMLで、<span>各項目の要素を作成し、現在の。で関数ng-clickを呼び出すディレクティブを指定します。removeItem$index

例

これで、ショッピングリストからアイテムを削除できます。

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

ステップ4.エラー処理：

同じアイテムを2回追加しようとすると、アプリケーションがクラッシュするなど、アプリケーションにいくつかのエラーがあります。また、空のアイテムを追加することは許可されるべきではありません。

新しいアイテムを追加する前に値を確認することで、これを修正します。

HTMLでは、エラーメッセージのコンテナを追加し、誰かが既存のアイテムを追加しようとしたときにエラーメッセージを書き込みます。

例

エラーメッセージを書き込む可能性のあるショッピングリスト：

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>

ステップ5.設計：

アプリケーションは機能しますが、より良い設計を使用できます。W3.CSSスタイルシートを使用してアプリケーションのスタイルを設定します。

W3.CSSスタイルシートを追加し、アプリケーション全体に適切なクラスを含めると、結果はこのページの上部にあるショッピングリストと同じになります。

例

W3.CSSスタイルシートを使用してアプリケーションのスタイルを設定します。