AngularJS-Anwendung
Es ist an der Zeit, eine echte AngularJS-Anwendung zu erstellen.
Eine Einkaufsliste schreiben
Lassen Sie uns einige der AngularJS-Funktionen verwenden, um eine Einkaufsliste zu erstellen, auf der Sie Artikel hinzufügen oder entfernen können:
Meine Einkaufsliste
- Milch×
- Brot×
- Käse×
Anwendung erklärt
Schritt 1. Erste Schritte:
Erstellen Sie zunächst eine Anwendung mit dem Namen myShoppingListund fügen Sie ihr einen Controller mit dem Namen hinzu myCtrl.
productsDer Controller fügt dem aktuellen
ein Array mit dem Namen hinzu $scope.
In HTML verwenden wir die ng-repeatDirektive, um eine Liste mit den Elementen im Array anzuzeigen.
Beispiel
Bisher haben wir eine HTML-Liste basierend auf den Elementen eines Arrays erstellt:
<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>
Schritt 2. Elemente hinzufügen:
Fügen Sie im HTML ein Textfeld hinzu und binden Sie es mit der ng-model
Direktive an die Anwendung.
Erstellen Sie im Controller eine Funktion mit dem Namen addItemund verwenden Sie den Wert des Eingabefelds, um dem Array addMeein Element hinzuzufügen .products
Fügen Sie eine Schaltfläche hinzu und geben Sie ihr eine ng-clickDirektive, die die addItemFunktion ausführt, wenn auf die Schaltfläche geklickt wird.
Beispiel
Jetzt können wir Artikel zu unserer Einkaufsliste hinzufügen:
<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>
Schritt 3. Elemente entfernen:
Wir möchten auch in der Lage sein, Artikel von der Einkaufsliste zu entfernen.
Erstellen Sie im Controller eine Funktion mit dem Namen removeItem, die den Index des Elements, das Sie entfernen möchten, als Parameter verwendet.
Erstellen Sie im HTML ein <span>Element für jedes Element und geben Sie ihnen eine ng-clickDirektive, die die removeItem
Funktion mit dem aktuellen aufruft $index.
Beispiel
Jetzt können wir Artikel von unserer Einkaufsliste entfernen:
<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>
Schritt 4. Fehlerbehandlung:
Die Anwendung weist einige Fehler auf, z. B. wenn Sie versuchen, dasselbe Element zweimal hinzuzufügen, stürzt die Anwendung ab. Außerdem sollte es nicht erlaubt sein, leere Elemente hinzuzufügen.
Wir werden das beheben, indem wir den Wert überprüfen, bevor wir neue Artikel hinzufügen.
Im HTML fügen wir einen Container für Fehlermeldungen hinzu und schreiben eine Fehlermeldung, wenn jemand versucht, ein vorhandenes Element hinzuzufügen.
Beispiel
Eine Einkaufsliste, mit der Möglichkeit Fehlermeldungen zu schreiben:
<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>
Schritt 5. Entwurf:
Die Anwendung funktioniert, könnte aber ein besseres Design vertragen. Wir verwenden das W3.CSS-Stylesheet, um unsere Anwendung zu gestalten.
Fügen Sie das W3.CSS-Stylesheet hinzu und fügen Sie die richtigen Klassen in die gesamte Anwendung ein, und das Ergebnis entspricht der Einkaufsliste oben auf dieser Seite.
Beispiel
Gestalten Sie Ihre Anwendung mit dem W3.CSS-Stylesheet:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">