AngularJS-Anwendung

Kursempfehlung:

Es ist an der Zeit, eine echte AngularJS-Anwendung zu erstellen.

Erstellen Sie eine Einkaufsliste

{{errortext}}

Anwendungserklärung

Schritt 1: Beginnen erstellt. myShoppingList der Anwendung hinzugefügt und einen Controller namens myCtrl

Controller mit dem Namen Produkte Array wird zum aktuellen $scope in.

In HTML verwenden wir ng-repeat Anweisung, um die Liste der mit den Elementen des Arrays verwendeten Artikel anzuzeigen.

Beispiel

Bis jetzt haben wir eine HTML-Liste auf Basis der Elemente des Arrays erstellt:

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

Probieren Sie es selbst aus

Schritt 2: Fügen Sie Artikel hinzu

Fügen Sie in HTML ein Textfeld hinzu und verwenden Sie ng-model Anweisung, um sie mit der Anwendung zu verknüpfen.

Im Controller erstellen wir eine Funktion namens addItem Funktion und verwenden Sie addMe Der Wert des Eingabefelds wird dem Artikel hinzugefügt Produkte in der Liste.

Fügen Sie eine Schaltfläche hinzu und weisen Sie ihr eine ng-click Anweisung, die beim Klicken auf die Schaltfläche ausgeführt wird. addItem Funktion.

Beispiel

Jetzt können wir Artikel zur Einkaufsliste hinzufügen:

<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()">Hinzufügen</button>
</div>

Probieren Sie es selbst aus

Schritt 3: Artikel löschen

Wir hoffen auch, dass wir Artikel aus der Einkaufsliste löschen können.

Im Controller erstellen wir eine Funktion namens removeItem Funktion, die den Index des zu löschenden Elements als Parameter übernimmt.

Im HTML erstellen wir für jedes Element eine <span> Element verwendet und ihm einen ng-click Anweisung, die den aktuellen $index Aufruf removeItem Funktion.

Beispiel

Jetzt können wir Artikel aus der Einkaufsliste löschen:

<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()">Hinzufügen</button>
</div>

Probieren Sie es selbst aus

Schritt 4: Fehlerbehandlung

Diese Anwendung hat einige Fehler, z.B. wenn Sie versucht, dasselbe Produkt zweimal hinzuzufügen, wird die Anwendung abstürzen. Außerdem sollte nicht erlaubt sein, leere Produkte hinzuzufügen.

Wir lösen dies durch Überprüfen des Wertes vor dem Hinzufügen eines neuen Produkts.

Im HTML fügen wir einen Container für Fehlermeldungen hinzu und schreiben eine Fehlermeldung, wenn jemand versucht, ein bereits vorhandenes Produkt hinzuzufügen.

Beispiel

Einkaufsliste, kann Fehlermeldungen einfügen:

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

Probieren Sie es selbst aus

Schritt 5: Gestaltung

Diese Anwendung kann ausgeführt werden, aber eine bessere Gestaltung wäre möglich. Wir verwenden die W3.CSS-Stylesheets, um unsere Anwendung zu gestalten.

Fügen Sie die W3.CSS-Stylesheet hinzu und enthalten Sie appropriate Klassen in der gesamten Anwendung, das Ergebnis wird mit der Einkaufsliste am oberen Ende dieser Seite übereinstimmen.

Beispiel

Verwenden Sie die W3.CSS-Stylesheets, um Ihre Anwendung zu gestalten:

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

Probieren Sie es selbst aus