AngularJS アプリケーション

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

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

AngularJSの機能を使用して、商品を追加または削除できるショッピングリストを作成しましょう：

私のショッピングリスト
  • {{x}}×

{{errortext}}


アプリケーション説明

第 1 步：開始

まず、 myShoppingList のアプリケーションに名前を付けて、 myCtrl のコントローラー。

コントローラーに名前を付けて、 products の配列を現在の $scope 中で使用します。

HTMLでは、 ng-repeat 配列の項目を使用してリストを表示するコマンドを追加します。

例

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

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</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>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
});
</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()">追加</button>
</div>

自分で試してみる

第 3 步：商品の削除

私たちは買い物リストから商品を削除することも希望しています。

コントローラーで、 removeItem の関数を作成します。この関数は削除したいアイテムのインデックスを引数として受け取ります。

HTMLで、各アイテムに <span> 要素を使用し、そのための ng-click インストラクション、現在の $index 呼び出し removeItem 関数。

例

今や商品を買い物リストから削除することができます：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  }
});
</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()">追加</button>
</div>

自分で試してみる

第 4 步：エラーハンドリング

このアプリにはいくつかのエラーがあります。例えば、同じ商品を二度に追加しようとするとアプリがクラッシュする場合があります。また、空の商品を追加することも許可されません。

新商品を追加する前に値を確認することでこの問題を解決します。

HTMLで、エラーメッセージのためのコンテナを追加し、既存の商品に試みたときにエラーメッセージを記述します。

例

買い物リスト、エラーメッセージを書き込むことができます：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});
</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()">追加</button>
  <p>{{errortext}}</p>
</div>

自分で試してみる

第 5 步：デザイン

このアプリケーションは動作しますが、より良いデザインを使用できます。私たちは W3.CSS スタイルシートを使用してアプリケーションをデザインしています。

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

例

W3.CSS スタイルシートを使用してアプリケーションをデザイン：

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

自分で試してみる