现在是时候建立一个真正的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样式表，并且包括合适的类整个应用程序，结果将是相同于本页面顶部的购物清单。