AngularJS applikation

Det är dags att skapa en riktig AngularJS applikation.

Skapa inköpslista

Låt oss använda några av AngularJS funktioner för att skapa en inköpslista där du kan lägga till eller ta bort varor:

Min inköpslista
  • {{x}}×

{{errortext}}


Applikationens beskrivning

Steg 1: Börja

Först skapa en namngiven myShoppingList applikationen och lägg till en namngiven myCtrl kontrollern.

kontrollern kommer att ha namnet products s array läggs till i den nuvarande $scope i.

I HTML använder vi ng-repeat instruktion för att visa en lista med objekt från arrayen.

Exempel

Hittills har vi skapat en HTML-lista baserat på objekten i arrayen:

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

Prova själv

Steg 2: Lägg till varor

I HTML, lägg till ett textfält och använd ng-model instruktionen för att binda den till applikationen.

在控制器中，创建一个名为 addItem funktionen och använda addMe Värdet för inmatningsfältet kommer att lägga till varor i products i arrayen.

Lägg till en knapp och ange en ng-click Instruktion, denna instruktion kommer att köras när du klickar på knappen. addItem 函数。

Exempel

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

<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()">Lägg till</button>
</div>

Prova själv

第 3 步：删除商品

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

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

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

Exempel

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

<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()">Lägg till</button>
</div>

Prova själv

第 4 步：错误处理

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

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

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

Exempel

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

<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()">Lägg till</button>
  <p>{{errortext}}</p>
</div>

Prova själv

Steg 5: Design

Applikationen kan köras, men en bättre design kan användas. Vi använder W3.CSS stilmallar för att designa vår applikation.

Lägg till W3.CSS stilmallar och inkludera lämpliga klasser i hela applikationen, resultatet kommer att vara detsamma som varukorgen på toppen av denna sida.

Exempel

Använd W3.CSS stilmallar för att designa din applikation:

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

Prova själv