Erstellen Sie einen einfachen Einkaufswagen mit AngularJS Teil 2

Im vorigen Teil dieser Tutorial-Serie haben wir gesehen, wie Sie mit AngularJS einen einfachen Einkaufswagen erstellen können. Wir haben ein einfaches Design entwickelt, aber es gab nicht genug AngularJS, um es eine AngularJS-Anwendung zu nennen. In diesem Teil der Lernprogrammreihe erstellen wir eine benutzerdefinierte AngularJS-Direktive, um die erforderliche Funktionalität zu implementieren.

Fertig machen

Beginnen wir mit dem Klonen des Quellcodes des vorherigen Tutorials von GitHub.

git clone https://github.com/jay3dec/AngularShoppingCart_Part1.git

Navigieren Sie nach dem Klonen des Quellcodes zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.

cd AngularShoppingCart_Part1 npm install

Wenn die Abhängigkeiten installiert sind, starten Sie den Server.

Knoten server.js

Richten Sie Ihren Browser auf http: // localhost: 3000 / und Sie sollten die Anwendung ausführen.

Erstellen einer Checklistenrichtlinie

In dem cart.html Seite werden die Elemente und ihre Optionen wiederholt. Daher erstellen wir eine AngularJS-Direktive, die Elemente und Optionen gemäß den Daten im Backend erstellt. Der Einfachheit halber betrachten wir die folgenden Artikel im Warenkorb:

['item': 'Festplatte', 'id': 'HD', 'selected': 0, 'prices': ['size': '200 GB', 'price': '2000', ' size ':' 400GB ',' price ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prices ': [' size ' : 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Monitor', 'id': 'MON' , 'ausgewählt': 0, 'Preise': ['Größe': '16 \ '', 'Preis': '3000', 'Größe': '19 \ '', 'Preis': '5000'] , 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': '350',  'size': 'Advanced', 'price': '550'], 'item': 'RAM', 'id': 'RM', 'selected': 0, 'prices': ['size ':' 4GB ',' price ':' 4000 ', ' size ':' 8GB ',' price ':' 8000 '], ' item ':' USB-Tastatur ',' id ':' TASTE ',' ausgewählt ': 0,' Preise ': [' Größe ':' Standard ',' Preis ':' 2500 ', ' Größe ':' Erweitert ',' Preis ':' 4500 '] ]

Fügen Sie die folgenden Daten in das ein CartCtrl.

$ scope.shopData = ['item': 'Festplatte', 'id': 'HD', 'selected': 0, 'prices': ['size': '200GB', 'price': '2000 ', ' size ':' 400GB ',' price ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prices ': ['size': 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Monitor', 'id ':' MON ',' ausgewählt ': 0,' Preise ': [' Größe ': '16' ',' Preis ':' 3000 ', ' Größe ': '19' ',' Preis ': '5000'], 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': ' 350 ', ' size ':' Advanced ',' price ':' 550 '], ' item ':' RAM ',' id ':' RM ',' selected ': 0,' prices ' : ['size': '4GB', 'price': '4000', 'size': '8GB', 'price': '8000'], 'item': 'USB Keyboard', 'id': 'KEY', 'selected': 0, 'prices': ['size': 'Standard', 'price': '2500', 'size': 'Advanced', 'price': '4500']];

Entfernen Sie das wiederholte .Panel HTML-Code von cart.html. Wir erstellen den HTML-Code dynamisch mit ngRepeat und $ scope.shopData. Fügen Sie der ersten Spalte des folgenden HTML-Codes hinzu .Reihe div. 

 
 
 
q.item
 
 
 

Wie im obigen Code zu sehen, verwenden Sie ngRepeat wir haben wiederholt shopData und das HTML gerendert. Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Aktualisieren Sie die Seite, und Sie sollten die auf der Seite angezeigten Elemente anzeigen können.

Als Nächstes zeigen wir die verfügbare Option zusammen mit einem bestimmten Artikel an, z. B. Größe und Preis (siehe JSON-Daten). Zu diesem Zweck erstellen wir eine eigene AngularJS-Direktive. AngularJS-Direktiven sind eine der leistungsfähigsten Funktionen von AngularJS. Ausführliche Informationen zu den Richtlinien von AngularJS finden Sie in den offiziellen Dokumenten.

Erstellen wir eine benutzerdefinierte Anweisung namens checkList. Öffnen cart.js und erstellen Sie eine neue Direktive wie abgebildet:

.Direktive ('checkList', function () return einschränken: 'E', Vorlage: function (elem, attrs) return '
\ 
\ Option 1\ 
\ 
\ Option 2\ 
\ 
\ Option 2\ 
\ 
'; )

Diese Direktive hat den Namen checkList. Die richtlinie checkList hat zwei Parameter, beschränken  und Vorlage. Beschränken legt fest, wie die Direktive aufgerufen wird. Da wir E definiert haben, wird es als Elementname bezeichnet:

Das Vorlage Feld definiert den HTML-Code, der checkList Direktive auf der Seite. Wir haben den gleichen statischen HTML-Code verwendet, den wir zuvor hatten. Rufen Sie jetzt die Direktive auf checkList auf der cart.html Seite.

 
 
q.item
 
  

Speichern Sie die obigen Änderungen und aktualisieren Sie die Warenkorbseite. Sie sollten die statischen HTML-Optionen auf der Warenkorbseite anzeigen können.

Nun lassen wir die Direktive Daten aus lesen $ scope.shopData. Anstatt die Optionen innerhalb der Direktive zu wiederholen, verwenden wir ngRepeat, um die Optionen zu durchlaufen. Ändern Sie die Direktive checkList wie gezeigt, um es dynamischer zu gestalten.

Vorlage: Funktion (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Wie Sie im obigen Code sehen können, erwarten wir die Möglichkeit an die Richtlinie übergeben werden. Aus dem HTML-Teil müssen wir also ein Attribut für die definieren checkList Direktive aufgerufen Möglichkeit und übergeben Sie die erforderlichen Daten. Ergänzen Sie die Möglichkeit im cart.html wie gezeigt:

 
 
q.item
 
  

Um auf das Bestanden zuzugreifen Möglichkeit In der Direktive müssen wir den Geltungsbereich definieren. In der checkList Direktive definieren Umfang wie gezeigt:

.Direktive ('checkList', function () return einschränken: 'E', Gültigkeitsbereich: Option: '=', template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'; )

Auf diese Weise stellt die Preisliste verschiedene Artikel aus $ scope.shopData wird in die Direktive übergeben. Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Aktualisieren Sie die Seite, und Sie sollten die Größe und den Preis jedes Artikels als Optionen auf der Seite anzeigen können.

Wenn Sie nun versuchen, für ein bestimmtes Element auf die Optionsschaltfläche zu klicken, werden beide ausgewählt. Um sicherzustellen, dass jeweils nur ein Element ausgewählt wird, werden die Optionsfelder gruppiert. Dafür müssen wir noch ein anderes bestehen Name Attribut für die Direktive aus der HTML-Ansicht. Also füge ein neues hinzu Name zuschreiben Checkliste aus der Sicht. Wir werden den Artikel übergeben ICH WÜRDE als die Name, da es zu jedem Artikel einzigartig ist.

Fügen Sie dem Richtlinienbereich jetzt eine weitere Variable hinzu, um sie in der Richtlinienvorlage verfügbar zu machen.

Bereich: Option: '=', Name: '='

In der Direktive Vorlage Fügen Sie in HTML den übergebenen Namen als Optionsfeldnamen hinzu, um die Optionsfelder für bestimmte Elemente zu gruppieren.

Speichern Sie die Änderungen und aktualisieren Sie die Seite. Versuchen Sie, die Optionsfelder für ein bestimmtes Element auszuwählen, und Sie sollten nur jeweils eines auswählen können.
Berechnen der Summe basierend auf den ausgewählten Optionen
Basierend auf den vom Benutzer ausgewählten Elementen müssen wir eine Gesamtsumme des Preises aller ausgewählten Elemente anzeigen. Dafür erstellen wir eine $ scope Funktion aufgerufen gesamt, was den Gesamtpreis summiert. Jedes Mal, wenn ein Benutzer ein Element auswählt, aktualisieren wir die in der ausgewählte Variable $ scope.shopData JSON. Dann wird dieser JSON iteriert, um den Gesamtpreis der ausgewählten Artikel zu ermitteln. Hier ist der gesamt Funktion.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  return t; 
Im Moment zeigen wir einen hartcodierten Wert von Rs 100 im total div. Stattdessen rufen wir einfach die Gesamtfunktion auf.
Rs. gesamt()
Speichern Sie die Änderungen und aktualisieren Sie die Seite. Wenn Sie versuchen, die verschiedenen Optionen auszuwählen, ändert sich die Summe nicht wirklich. Es ist weil der Anfangswert der ausgewählt Variable in JSON ist 0 und wird bei Auswahl nicht aktualisiert. Lassen Sie uns also den ausgewählten Wert von JSON in die Direktive übergeben und ihn aktualisieren, wenn das Optionsfeld ausgewählt ist. Ändern Sie die HTML-Ansicht, um eine weitere hinzuzufügen ausgewählt Attribut zum checkList Direktive Element. 
Hinzufügen ausgewählt den Geltungsbereich der Richtlinie, um innerhalb der Richtlinie darauf zuzugreifen.
Gültigkeitsbereich: Option: '=', Name: '=', ausgewählt: '= ausgewählt'
Wir werden uns setzen ausgewählt zum Radioknopf ngModel Richtlinie und die i.preis zum ngValue Richtlinie. Jedes Mal, wenn das Optionsfeld ausgewählt wird, wird sein Wert im aktualisiert ausgewählt Attribut des $ scope.shopData JSON. 
Speichern Sie die obigen Änderungen und aktualisieren Sie die Seite. Versuchen Sie, die Optionsschaltflächen auszuwählen, und je nach Auswahl die Option Gesamt Preis sollte aktualisiert werden.
Fazit
In diesem Teil der Lernprogrammreihe haben wir eine benutzerdefinierte Direktive erstellt und in unserer einfachen Warenkorbanwendung verwendet. Im nächsten Teil dieser Serie werden wir sehen, wie die Gesamtdifferenz beim Scrollen nach unten immer oben fixiert wird. Wir werden auch die Checkout-Seite implementieren, auf der die ausgewählten Artikel und Preise mit einer Schaltfläche angezeigt werden. Zurück zur Warenkorbseite, um die Auswahl anzupassen.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar. Teilen Sie uns Ihre Meinung oder Korrekturen in den Kommentaren unten mit!



		
			
	   
	




Code