現在是時候建立一個真正的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 ，這需要您要刪除的項目的索引，作為一個放慢參數
在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)">×</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)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
試一試» 第5步設計：
該應用程序的工作原理，但可以使用一個更好的設計。 我們使用W3.CSS樣式表的樣式我們的應用程序。
添加W3.CSS樣式表，並且包括合適的類整個應用程序，結果將是相同於本頁面頂部的購物清單。