最新のWeb開発のチュートリアル
 

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 = ["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>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $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()">Add</button>
 </div>
»それを自分で試してみてください

ステップ3削除するアイテム：

また、買い物リストから項目を削除できるようにしたいです。

コントローラでは、という名前の関数作るremoveItem PARAMTERとして、削除したい項目のインデックスをとり、

HTMLでは、作る<span>各項目の要素を、それらを与えるng-clickを呼び出しディレクティブremoveItem電流で関数を$index 。

例

今、私たちは私たちの買い物リストから項目を削除することができます。

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $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)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>
»それを自分で試してみてください

ステップ4エラー処理：

あなたは、二回アプリケーションのクラッシュを同じ項目を追加しようとした場合のようなアプリケーションは、多少の誤差があります。 また、空の項目を追加することは許されません。

私たちは、新しいアイテムを追加する前に値をチェックすることにより、これを修正します。

HTMLでは、我々は、エラーメッセージのコンテナを追加し、誰かが既存の項目を追加しようとすると、エラーメッセージを書き込みます。

例

エラーメッセージを書き込む可能性の買い物リスト、：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
             $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
     }
    $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)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
    <p>{{errortext}}</p>
</div>
»それを自分で試してみてください

ステップ5.デザイン：

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

W3.CSSスタイルシートを追加し、アプリケーション全体で適切なクラスが含まれ、その結果が、このページの上部に買い物リストと同じになります。

例

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

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
»それを自分で試してみてください

❮前 次の章❯