Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Bestellformular: Ein Anfängerleitfaden

Hallo da draußen, zukünftige AngularJS-Zauberer! Heute begeben wir uns auf eine aufregende Reise in die Welt der AngularJS-Bestellformulare. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – wir beginnen bei den ganz Basics und arbeiten uns hoch. Am Ende dieses Tutorials werden Sie dynamische Bestellformulare wie ein Profi erstellen können!

AngularJS - Order Form

Was ist AngularJS?

Bevor wir uns den Bestellformularen zuwenden, lassen Sie uns einen Moment darauf verwenden, zu verstehen, was AngularJS ist. Stellen Sie sich vor, Sie bauen ein Haus. HTML ist wie der Zement und der Mörtel, CSS ist die Farbe und die Dekorationen, und AngularJS? Na ja, das ist wie das intelligente Haussystem, das alles interaktiv und dynamisch macht.

AngularJS ist ein JavaScript-Framework, das HTML um neue Attribute erweitert und perfekt für die Erstellung dynamischer Webanwendungen geeignet ist. Es ist so, als würde man Ihrer sonst statischen HTML Superkräfte verleihen!

Einrichten unseres Projekts

Zunächst einmal richten wir unser Projekt ein. Wir müssen die AngularJS-Bibliothek in unsere HTML-Datei einbinden. So machen wir das:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Mein AngularJS-Bestellformular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Unser Formular kommt hier hin -->
<script src="app.js"></script>
</body>
</html>

In diesem Code tun wir einige wichtige Dinge:

  1. Wir haben ng-app="orderApp" zum <html>-Tag hinzugefügt. Das tells AngularJS, dass dies das Root-Element unserer Anwendung ist.
  2. Wir haben die AngularJS-Bibliothek über einen <script>-Tag eingebunden.
  3. Wir haben auch unsere eigene JavaScript-Datei (app.js) eingebunden, in der wir unseren AngularJS-Code schreiben werden.

Erstellen unseres AngularJS-Moduls und Controllers

Jetzt erstellen wir unsere app.js-Datei und richten unser AngularJS-Modul und unseren Controller ein:

var app = angular.module('orderApp', []);

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Hier passiert Folgendes:

  1. Wir erstellen ein AngularJS-Modul namens 'orderApp'.
  2. Wir definieren einen Controller namens 'OrderController'.
  3. Innerhalb des Controllers initialisieren wir ein order-Objekt auf dem $scope. Dieses Objekt wird unsere Bestellartikel und die Summe enthalten.

Erstellen des Bestellformulars

Jetzt erstellen wir unser Bestellformular in der HTML:

<div ng-controller="OrderController">
<h2>Platzieren Sie Ihre Bestellung</h2>
<form>
<label>Artikelname: <input type="text" ng-model="newItem.name"></label><br>
<label>Preis: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Artikel hinzufügen</button>
</form>

<h3>Bestellübersicht</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Entfernen</button>
</li>
</ul>
<p>Total: ${{order.total}}</p>
</div>

Lassen Sie uns das auseinandernehmen:

  1. Wir verwenden ng-controller, um diesen Abschnitt mit unserem OrderController zu verknüpfen.
  2. Wir haben Eingabefelder für Artikelname und Preis, die mit ng-model an newItem.name und newItem.price gebunden sind.
  3. Wir haben eine "Artikel hinzufügen"-Schaltfläche, die eine addItem()-Funktion aufruft, wenn sie geklickt wird.
  4. Wir verwenden ng-repeat, um jeden Artikel in der Bestellung anzuzeigen.
  5. Jeder Artikel hat eine "Entfernen"-Schaltfläche, die eine removeItem()-Funktion aufruft.
  6. Wir显示den Gesamtbetrag der Bestellung.

Implementierung der Controller-Logik

Jetzt fügen wir die notwendigen Funktionen zu unserem Controller hinzu:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

Hier ist, was jede Funktion macht:

  1. addItem(): Fügt einen neuen Artikel zur Bestellung hinzu, berechnet die neue Summe und setzt die Eingabefelder zurück.
  2. removeItem(): Entfernt einen Artikel aus der Bestellung und berechnet die neue Summe.
  3. calculateTotal(): Addiert die Preise aller Artikel in der Bestellung.

Verbesserung der Benutzererfahrung

Um unser Formular benutzerfreundlicher zu gestalten, fügen wir einige Validierungen hinzu:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Artikelname: <input type="text" ng-model="newItem.name" required></label><br>
<label>Preis: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Artikel hinzufügen</button>
</form>

Und aktualisieren wir unseren Controller:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Diese Änderungen:

  1. Fügen Formularvalidierung hinzu, um sicherzustellen, dass alle Felder ausgefüllt sind und der Preis eine positive Zahl ist.
  2. Deaktivieren die "Artikel hinzufügen"-Schaltfläche, wenn das Formular ungültig ist.
  3. Fügen den Artikel nur hinzu, wenn das Formular gültig ist.
  4. Setzen das Formular auf seinen ursprünglichen Zustand zurück, nachdem ein Artikel hinzugefügt wurde.

Schlussfolgerung

Glückwunsch! Sie haben gerade ein funktionierendes AngularJS-Bestellformular erstellt. Wir haben die Grundlagen von AngularJS behandelt, einschließlich Module, Controller, Zwei-Wege-Datenbindung und Formularvalidierung. Denken Sie daran, Übung macht den Meister, also haben Sie keine Angst, dieses Formular zu experimentieren und zu erweitern. Vielleicht fügen Sie eine Rabattfunktion hinzu oder die Möglichkeit, Bestellungen zu speichern? Die Möglichkeiten sind endlos!

Hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven zusammenfasst, die wir verwendet haben:

Direktive Zweck
ng-app Definiert das Root-Element einer AngularJS-Anwendung
ng-controller Legt einen Controller für einen Abschnitt der Anwendung fest
ng-model Erzeugt eine Zwei-Wege-Datenbindung
ng-click Gibt an, welche Funktion bei einem Klick auf ein Element ausgeführt werden soll
ng-repeat Wiederholt ein Element für jedes Element in einer Sammlung
ng-submit Gibt an, welche Funktion bei der Übermittlung eines Formulars ausgeführt werden soll
ng-disabled Deaktiviert ein Element basierend auf einer Bedingung

viel Spaß beim Programmieren, und denken Sie daran – jeder Experte war einmal ein Anfänger. Üben Sie weiter, und Sie werden很快 ein AngularJS-Meister!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Wechsel-Menü
Nächstes Tutorial:
AngularJS - Suchregisterkarte