Share
Im vorherigen Teil dieser Lernprogrammreihe haben wir eine benutzerdefinierte Direktive erstellt und in unserer einfachen Warenkorbanwendung verwendet. In diesem Teil der Tutorialreihe erfahren Sie, wie Sie die Gesamtdivision beim Scrollen des Browsers nach oben zeigen. Wir erstellen auch eine Checkout-Seite, auf der alle vom Benutzer ausgewählten Elemente angezeigt werden.
Beginnen wir mit dem Klonen des vorherigen Teils des Tutorials von GitHub.
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
Navigieren Sie nach dem Klonen des Quellcodes zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.
cd AngularShoppingCart_Part2 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.
Obwohl wir die Bootstrap-Affixkomponente verwenden, um die Gesamtdivision oben zu halten, funktioniert sie nicht wie erwartet. Untersuchen wir, was schief läuft.
Die Bootstrap-Affixkomponente fügt eine Klasse hinzu, die als aufgerufen wird Affix wenn wir über eine bestimmte Höhe blättern und Affix-Top wenn es unten ist Es funktioniert immer noch in den einfachen HTML-Seiten, aber wenn es in AngularJS integriert ist, scheint es nicht zu funktionieren. Um dieses Problem zu beheben, überprüfen wir die Bildlaufhöhe. Wenn sie über und unter einer bestimmten Höhe liegt, beispielsweise 50 px, fügen wir die Affix-Klassen entsprechend hinzu.
Angenommen, wir haben die Bildlaufhöhe als scrollen, Ergänzen Sie die Affix und Affix-Top Klassen zu den Gesamt div mit der ngClass-Direktive.
ng-class = "'affix': scroll> 50, 'affix-top': scroll <= 50"
Um die Schriftrolle zu erhalten, erstellen wir eine andere Direktive. Nennen wir die Direktive getScroll. Diese Direktive wird das aktualisieren scrollen Wert jedes Mal, wenn das Browserfenster gescrollt wird und basierend auf scrollen Die Affix-Klassen werden aktualisiert.
Accentsconagua
.Direktive ('getScroll', Funktion ($ window) return scope: scroll: '= scroll'), link: function (scope, element, attrs) var scrollwindow = eckiges Element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (scope, function () scope.scroll = scrollwindow.scrollTop ();));;)Wie im obigen Code zu sehen, übergeben wir ein Scroll-Attribut an getScroll Richtlinie. Beim Scrollen berechnen wir die Scrollhöhe von oben mit angle.element ($ window). Bei jedem Scroll-Event aktualisieren wir die scrollen Bereichsvariable.
Fügen Sie die obige Direktive am Ende von hinzu cart.html Seite.
Speichern Sie diese Änderungen und aktualisieren Sie die Seite. Versuchen Sie, das Browserfenster zu scrollen. Die Summe sollte oben sichtbar und immer sichtbar sein.
Um die Checkout-Seite mit den ausgewählten Elementen zu füllen, müssen wir die Elemente zwischen Controllern übergeben. Wir verwenden also einen AngularJS-Dienst, um die Daten zwischen Steuerungen zu übertragen. Erstellen wir einen Dienst namens CommonProp wo wir die ausgewählten Artikel und auch den Gesamtpreis speichern. Aufmachen cart.js und erstellen Sie einen Dienst namens CommonProp wie gezeigt:
.service ('CommonProp', function () var Items = "; var Summe = 0; return getItems: function () return Items;, setItem: function (value) Items = wert;, getTotal: function ( ) return Total;, setTotal: Funktion (Wert) Total = Wert;;);Wie gesehen, in der CommonProp Service Wir haben vier Funktionen definiert, um die Artikel und den Gesamtpreis abzurufen und festzulegen. Injizieren Sie die CommonProp Dienst in der CartCtrl.
.Controller ('CartCtrl', ['$ scope', 'CommonProp'), Funktion ($ scope, CommonProp) Wir werden auf jede Änderung im achten shopData variabel und aktualisieren Sie die Servicedaten entsprechend. Fügen Sie den folgenden Code hinzu CartCtrl.
$ scope. $ watch ('shopData', function () CommonProp.setItem ($ scope.shopData);)Innerhalb checkout.js, spritze das ein CommonProp Service in CheckoutCtrl.
.Controller ('CheckoutCtrl', ['$ scope', 'CommonProp'), Funktion ($ scope, CommonProp) Wir werden die verwenden CommonProp Dienst, um die Einzelteile und Gesamtmenge zu erhalten CheckoutCtrl.
.Controller ('CheckoutCtrl', ['$ scope', 'CommonProp', Funktion ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();));Verwenden $ scope.items Wir füllen die Checkout-Seite auf. Aufmachen checkout.html und entfernen Sie die vorhandene hartcodierte Tabelle. Wir verwenden die ngRepeat-Direktive und $ scope.items um die Tabelle zu erstellen und dynamisch auszufüllen.
| i.item | Rs. ich wählte |
Speichern Sie die obigen Änderungen und aktualisieren Sie die Seite. Wählen Sie einige Elemente aus und klicken Sie dann auf Auschecken Schaltfläche in der Warenkorbseite. Sobald Sie sich auf der Checkout-Seite befinden, sollte die Liste der ausgewählten Elemente angezeigt werden.
Lassen Sie uns auch den Gesamtpreis in die Checkout-Seite aufnehmen. Wenn also die Summe in der Gesamtfunktion in berechnet wird CartCtrl, Aktualisieren Sie die CommonProp Gesamtwert der Dienstleistung.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); Rückgabe t;
Um die Gesamtsumme auf der Checkout-Seite anzuzeigen, geben Sie Folgendes ein tr HTML Quelltext:
Gesamt: Rs. gesamt
Da aktualisieren wir die gesamt Bereichsvariable in CheckoutCtrl, Die Summe wird automatisch angezeigt. Speichern Sie die Änderungen und beginnen Sie neu. Wählen Sie einige Elemente aus und wählen Sie zur Kasse. Sobald Sie sich auf der Checkout-Seite befinden, sollten Sie die ausgewählten Artikel und den Gesamtpreis sehen können.
Einmal auf der Checkout-Seite, wenn Sie auf klicken Anpassen Sie werden zur Warenkorb-Seite weitergeleitet, aber alle Auswahlmöglichkeiten werden gelöscht. Also müssen wir das beheben. Sobald die Warenkorbseite geladen ist, überprüfen wir die CommonProp Service für vorhandene Artikel. Wenn Artikel vorhanden sind, verwenden wir diese Elemente, um die Warenkorbseite auszufüllen.
Innerhalb CartCtrl Überprüfen Sie, ob Elemente in vorhanden sind CommonProp und setze das $ scope.shopData.
if (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Speichern Sie alle obigen Änderungen und starten Sie den Server neu. Wählen Sie auf der Warenkorbseite einige Elemente aus und klicken Sie auf Auschecken um zur Checkout-Seite zu navigieren. Klicken Sie auf der Checkout-Seite auf die Schaltfläche Anpassen Schaltfläche, um zur Warenkorbseite zurückzukehren. Und Sie sollten alle Auswahlmöglichkeiten in der Warenkorb-Seite haben.
In diesem Teil der Tutorialserie haben wir die Checkout-Seite implementiert und erfahren, wie Daten mit einem AngularJS-Service zwischen verschiedenen Controllern gemeinsam genutzt werden. Wir haben auch eine Direktive erstellt, um die Bildlaufhöhe zu ermitteln und das Problem mit dem Bootstrap-Affix zu beheben.
Ich hoffe, Sie haben aus dieser Tutorialserie etwas Nützliches gelernt. Weitere Informationen zu den Richtlinien von AngularJS finden Sie in der offiziellen Dokumentation.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar. Teilen Sie uns Ihre Gedanken und Korrekturen in den Kommentaren unten mit!
