Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Einkaufswagen-Anwendung

Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise, um eine Einkaufswagenanwendung mit AngularJS zu erstellen. Als Ihr freundlicher Nachbarschaftsinformatiklehrer bin ich begeistert, Sie durch diesen Prozess zu führen, selbst wenn Sie完全新 (komplett neu) im Programmieren sind. Also, holen Sie sich eine Tasse Kaffee (oder Ihr Lieblingsgetränk) und tauchen wir ein!

AngularJS - Cart Application

Was ist AngularJS?

Bevor wir mit der Erstellung unserer Einkaufswagenanwendung beginnen, lassen Sie uns einen Moment innehalten, um zu verstehen, was AngularJS ist. AngularJS ist ein leistungsstarkes JavaScript-Framework, das uns hilft, dynamische Webanwendungen zu erstellen. Es ist wie ein Schweizer Army-Messer für Web-Entwickler, das Werkzeuge bietet, um unser Leben einfacher und unseren Code organisierter zu gestalten.

Einrichtung unseres Projekts

Schritt 1: Erstellung der HTML-Struktur

Lassen Sie uns mit der Erstellung einer grundlegenden HTML-Struktur für unsere Einkaufswagenanwendung beginnen. Machen Sie sich keine Sorgen, wenn Sie mit HTML nicht vertraut sind; ich werde jeden Teil erklären, während wir vorankommen.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>Mein Einkaufswagen</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>Mein Einkaufswagen</h1>
<!-- Später fügen wir hier mehr Inhalt hinzu -->
</body>
</html>

In dieser HTML-Struktur haben wir einige wichtige Dinge getan:

  1. Wir haben die AngularJS-Bibliothek über einen CDN-Link eingebunden.
  2. Wir haben unsere eigene JavaScript-Datei (app.js) verknüpft, die wir als nächstes erstellen werden.
  3. Wir haben ng-app="cartApp" zum <html>-Tag hinzugefügt, was AngularJS mitteilt, dass dies das Wurzelelement unserer Anwendung ist.
  4. Wir haben ng-controller="CartController" zum <body>-Tag hinzugefügt, das wir verwenden, um die Logik unseres Einkaufswagens zu verwalten.

Schritt 2: Erstellung der AngularJS-Anwendung

Jetzt erstellen wir unsere app.js-Datei und richten unsere AngularJS-Anwendung ein:

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

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

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

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

Lassen Sie uns das zusammenbrechen:

  1. Wir erstellen ein AngularJS-Modul namens 'cartApp'.
  2. Wir definieren einen Controller namens 'CartController'.
  3. Innerhalb des Controllers richten wir ein leeres Array für unsere Artikel und eine Total-Variablen ein.
  4. Wir erstellen Funktionen zum Hinzufügen von Artikeln, Entfernen von Artikeln und Berechnen des Gesamtbetrags.

Erstellung der Benutzeroberfläche

Schritt 3: Erstellung der Artikeliste

Lassen Sie uns unser HTML aktualisieren, um die Artikel in unserem Einkaufswagen anzuzeigen:

<body ng-controller="CartController">
<h1>Mein Einkaufswagen</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Entfernen</button>
</li>
</ul>
<p>Total: ${{total}}</p>
</body>

Hier verwenden wir AngularJS-Direktiven:

  • ng-repeat, um durch unsere Artikel zu iterieren
  • {{}} für Datenbindungen, um Artikel Eigenschaften anzuzeigen
  • ng-click, um unsere removeItem-Funktion aufzurufen, wenn der Button geklickt wird

Schritt 4: Hinzufügen neuer Artikel

Lassen Sie uns ein Formular hinzufügen, um Benutzern das Hinzufügen neuer Artikel zu ermöglichen:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Artikelname" required>
<input type="number" ng-model="newItem.price" placeholder="Preis" required>
<button type="submit">In den Einkaufswagen</button>
</form>

Dieses Formular verwendet:

  • ng-submit, um unsere addItem-Funktion aufzurufen, wenn das Formular submitted wird
  • ng-model, um Eingabewerte an unser newItem-Objekt zu binden

Verbesserung der Anwendung

Schritt 5: Hinzufügen von Artikel Mengen

Lassen Sie uns unsere Anwendung so erweitern, dass sie Artikel Mengen verwalten kann:

app.controller('CartController', function($scope) {
// ... vorheriger Code ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

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

Und aktualisieren wir unser HTML:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Entfernen</button>
</li>

Schlussfolgerung

Glückwunsch! Sie haben gerade eine funktionierende Einkaufswagenanwendung mit AngularJS erstellt. Wir haben die Grundlagen der Einrichtung einer AngularJS-Anwendung, der Erstellung von Controllern, die Verwendung von Direktiven für Datenbindungen und Ereignisverarbeitung sowie das Hinzufügen einiger fortgeschrittener Funktionen wie die Verwaltung von Artikel Mengen behandelt.

Denken Sie daran, dass das Lernen von Code eine Reise ist, und dies ist erst der Anfang. Bleiben Sie am Ball, experimentieren Sie und vor allem, haben Sie Spaß dabei!

Hier ist eine Tabelle, die die Hauptbegriffe summarisch zusammenfasst, die wir verwendet haben:

Konzept Beschreibung Beispiel
Modul Behälter für verschiedene Teile einer App angular.module('cartApp', [])
Controller Enthält die Geschäftslogik für einen Teil der App app.controller('CartController', function($scope) {...})
Scope Objekt, das auf das Anwendungsmodell verweist $scope.items = []
Direktiven Erweitert HTML mit benutzerdefinierten Attributen und Elementen ng-repeat, ng-click, ng-submit
Datenbindung Synchronisiert Daten zwischen Modell und Ansicht {{item.name}}

Weiters coding und denken Sie daran: Jeder Experte war einmal ein Anfänger. Sie machen großartig!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Drag-Anwendung
Nächstes Tutorial:
AngularJS - Übersetzungsanwendung