参考手册
AngularJS 路由
AngularJS 实例

AngularJS 应用程序

现在来创建一个真正的 AngularJS 应用程序了。

制作一张购物清单

让我们使用 AngularJS 的一些功能制作一个购物清单，您可以在其中添加或删除项目:

步骤 1. 开始:

首先制作一个名为 myShoppingList 的应用程序，然后向其中添加一个名为 myCtrl 的控制器。

控制器将一个名为 products 的数组添加到当前的 $scope 中。

在 HTML 中，我们使用 ng-repeat 指令来显示使用数组中的项的列表。

实例

到目前为止，我们已经根据数组中的项目制作了一个 HTML 列表:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <script>
  7. var app = angular.module("myShoppingList", []);
  8. app.controller("myCtrl", function($scope) {
  9.     $scope.products = ["Milk", "Bread", "Cheese"];
  10. });
  11. </script>
  13. <div ng-app="myShoppingList" ng-controller="myCtrl">
  14.   <ul>
  15.     <li ng-repeat="x in products">{{x}}</li>
  16.   </ul>
  17. </div>
  19. <p>到目前为止，我们已经根据数组中的项目制作了一个 HTML 列表。</p>
  21. </body>
  22. </html>
运行一下
步骤 2. 添加 Items:

在 HTML 中，添加一个文本字段，并使用 ng-model 指令将其绑定到应用程序。

在控制器中，创建一个名为 addItem 的函数，并使用 addMe 输入字段的值向 products 数组添加一个项。

添加一个按钮，并给它一个 ng-click 指令，该指令将在单击按钮时运行 addItem 函数。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <script>
  7. var app = angular.module("myShoppingList", []);
  8. app.controller("myCtrl", function($scope) {
  9.     $scope.products = ["Milk", "Bread", "Cheese"];
  10.     $scope.addItem = function () {
  11.         $scope.products.push($scope.addMe);
  12.     }
  13. });
  14. </script>
  16. <div ng-app="myShoppingList" ng-controller="myCtrl">
  17.   <ul>
  18.     <li ng-repeat="x in products">{{x}}</li>
  19.   </ul>
  20.   <input ng-model="addMe">
  21.   <button ng-click="addItem()">添加</button>
  22. </div>
  24. <p>在输入字段中写入以添加项目。</p>
  26. </body>
  27. </html>
运行一下
步骤 3. 移除 Items:

我们还希望能够从购物清单中删除物品。

在控制器中，创建一个名为 removeItem 的函数，该函数将要删除的项的索引作为参数。

在 HTML 中，为每个项目创建一个 <span> 元素，并给它们一个 ng-click 指令，该指令使用当前的 $index 调用 removietem 函数。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <script>
  7. var app = angular.module("myShoppingList", []);
  8. app.controller("myCtrl", function($scope) {
  9.     $scope.products = ["Milk", "Bread", "Cheese"];
  10.     $scope.addItem = function () {
  11.         $scope.products.push($scope.addMe);
  12.     }
  13.     $scope.removeItem = function (x) {
  14.         $scope.products.splice(x, 1);
  15.     }
  16. });
  17. </script>
  19. <div ng-app="myShoppingList" ng-controller="myCtrl">
  20.   <ul>
  21.     <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">&times;</span></li>
  22.   </ul>
  23.   <input ng-model="addMe">
  24.   <button ng-click="addItem()">添加</button>
  25. </div>
  27. <p>单击 "x" 从购物列表中删除一个项目。</p>
  29. </body>
  30. </html>
运行一下
步骤 4. 错误处理:

应用程序有一些错误，例如，如果尝试添加同一个项目两次，应用程序就会崩溃。此外，不应允许添加空项。

我们将通过在添加新项目之前检查值来解决这个问题。

在 HTML 中，我们将为错误消息添加一个容器，并在有人试图添加一个已存在的项目时，写入错误消息。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <script>
  7. var app = angular.module("myShoppingList", []);
  8. app.controller("myCtrl", function($scope) {
  9.     $scope.products = ["Milk", "Bread", "Cheese"];
  10.     $scope.addItem = function () {
  11.         $scope.errortext = "";
  12.         if (!$scope.addMe) {return;}
  13.         if ($scope.products.indexOf($scope.addMe) == -1) {
  14.             $scope.products.push($scope.addMe);
  15.         } else {
  16.             $scope.errortext = "该商品已存在于您的购物清单中。";
  17.         }
  18.     }
  19.     $scope.removeItem = function (x) {
  20.         $scope.errortext = "";
  21.         $scope.products.splice(x, 1);
  22.     }
  23. });
  24. </script>
  26. <div ng-app="myShoppingList" ng-controller="myCtrl">
  27.   <ul>
  28.     <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">&times;</span></li>
  29.   </ul>
  30.   <input ng-model="addMe">
  31.   <button ng-click="addItem()">添加</button>
  32.   <p>{{errortext}}</p>
  33. </div>
  35. <p>尝试添加同一个项目两次，您将收到一条错误消息。</p>
  37. </body>
  38. </html>
运行一下
步骤 5. 设计:

该应用程序可以工作，但可以使用更好的设计。我们使用 W3.CSS 样式表来设计我们的应用程序。

添加 W3.CSS 样式表，并在整个应用程序中包含适当的样式类，结果将与此页面顶部的购物列表相同。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  5. <body>
  7. <script>
  8. var app = angular.module("myShoppingList", []);
  9. app.controller("myCtrl", function($scope) {
  10.     $scope.products = ["Milk", "Bread", "Cheese"];
  11.     $scope.addItem = function () {
  12.         $scope.errortext = "";
  13.         if (!$scope.addMe) {return;}
  14.         if ($scope.products.indexOf($scope.addMe) == -1) {
  15.             $scope.products.push($scope.addMe);
  16.         } else {
  17.             $scope.errortext = "该商品已存在于您的购物清单中";
  18.         }
  19.     }
  20.     $scope.removeItem = function (x) {
  21.         $scope.errortext = "";
  22.         $scope.products.splice(x, 1);
  23.     }
  24. });
  25. </script>
  27. <div ng-app="myShoppingList" ng-cloak="" ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
  28.   <header class="w3-container w3-light-grey w3-padding-16">
  29.     <h3>我的购物清单</h3>
  30.   </header>
  31.   <ul class="w3-ul">
  32.     <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">&times;</span></li>
  33.   </ul>
  34.   <div class="w3-container w3-light-grey w3-padding-16">
  35.     <div class="w3-row w3-margin-top">
  36.       <div class="w3-col s10">
  37.         <input placeholder="这里添加购物商品" ng-model="addMe" class="w3-input w3-border w3-padding">
  38.       </div>
  39.       <div class="w3-col s2">
  40.         <button ng-click="addItem()" class="w3-btn w3-padding w3-green">添加</button>
  41.       </div>
  42.     </div>
  43.     <p class="w3-text-red">{{errortext}}</p>
  44.   </div>
  45. </div>
  47. </body>
  48. </html>
运行一下
AngularJS 路由
AngularJS 实例

分类导航