AngularJS Applicaties

Aanbevolen cursus:

Het is tijd om een echte AngularJS applicatie te maken.

Maak een winkelwagen

{{errortext}}

Applicatiebeschrijving

Stap 1: Begin Maak eerst een genaamd myShoppingList toe aan de applicatie en voeg een genaamd toe myCtrl

controller genaamd products de array toe aan de huidige $scope in.

In HTML gebruiken we ng-repeat opdracht om de lijst van items in de array weer te geven.

Voorbeeld

Tot nu toe hebben we een HTML-lijst gemaakt op basis van de items in de array:

<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>

Probeer het zelf

Stap 2: Voeg product toe

Voeg in HTML een tekstveld toe en gebruik ng-model opdracht aan de applicatie.

在控制器中，创建一个名为 addItem functie en bind het met de addMe De waarde van het invoerveld voegt het product toe aan products in de array.

Voeg een knop toe en specificeer een ng-click Opdracht, deze opdracht wordt uitgevoerd wanneer op de knop wordt geklikt. addItem 函数。

Voorbeeld

现在我们可以将商品添加到购物清单中：

<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()">Toevoegen</button>
</div>

Probeer het zelf

第 3 步：删除商品

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

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

在 HTML 中，为每个项目创建一个 <span> 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

Voorbeeld

现在我们可以从购物清单中删除商品：

<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()">Toevoegen</button>
</div>

Probeer het zelf

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

Voorbeeld

购物清单，可以写入错误消息：

<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()">Toevoegen</button>
  <p>{{errortext}}</p>
</div>

Probeer het zelf

Stap 5: Ontwerp

Deze applicatie kan draaien, maar er kan een betere ontwerp gebruikt worden. We gebruiken de W3.CSS Stijltafel om onze applicatie te ontwerpen.

Voeg de W3.CSS Stijltafel toe en bevat de juiste klassen in de hele applicatie, het resultaat zal hetzelfde zijn als de winkelwagen aan de top van deze pagina.

Voorbeeld

Gebruik de W3.CSS Stijltafel om uw applicatie te ontwerpen:

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

Probeer het zelf