Erstellen Sie einen einfachen Einkaufswagen mit AngularJS Teil 1

In diesem Lernprogramm erfahren Sie, wie Sie mit AngularJS einen einfachen Warenkorb erstellen. Diese Tutorialserie konzentriert sich auf die Verwendung von AngularJS-Direktiven. AngularJS-Direktiven sind der Kernbestandteil von AngularJS und verleihen dem HTML-Code ein besonderes Verhalten. Aus den offiziellen Dokumenten:

Auf hoher Ebene sind Direktiven Markierungen in einem DOM-Element (z. B. ein Attribut, ein Elementname, ein Kommentar oder eine CSS-Klasse), die den HTML-Compiler von AngularJS ($ kompilieren), um ein bestimmtes Verhalten an dieses DOM-Element anzuhängen oder sogar das DOM-Element und seine untergeordneten Elemente zu transformieren.

Eine Cart Page entwerfen

Wir werden Bootstrap verwenden, um unsere Seite zu gestalten. Sobald wir mit der von Bootstrap entwickelten Seite fertig sind, integrieren wir sie in unsere AngularJS-Anwendung. Beim Entwerfen der Seite werden wir nicht viel auf Bootstrap eingehen, aber wir konzentrieren uns auf einige kritische Punkte.

Erstellen Sie eine Seite namens index.html. Laden Sie die Bootstrap-Dateien herunter und fügen Sie sie in ein index.html.

      Bootstrap-Shop-Warenkorb

In der .Container div, erstellen Sie eine .Reihe div.

In dem index.html Seite haben wir zwei Spalten. In einer wird eine Liste mit Artikeln angezeigt, deren Preise angezeigt werden, und in der anderen Spalte wird angezeigt Gesamt div. Also lassen Sie uns die beiden Spalten erstellen.

Nun fügen wir in der ersten Spalte einige Elemente und Optionen hinzu.

  Panel-Titel
 
    Option 1 
   Option 1 
   Option 1

Replizieren Sie den obigen HTML-Code einige Male in der ersten Spalte, um weitere Elemente zu erhalten. Fügen Sie in der zweiten Spalte den folgenden HTML-Code hinzu, um die Summe des Preises der ausgewählten Artikel anzuzeigen.

  Gesamt
 
  Rs. 100
 
 
  Auschecken

Speichern Sie die Änderungen und durchsuchen Sie index.html. Es sollte so aussehen:

Es sieht gut aus. Aber eine Sache, die wir reparieren müssen, ist die Gesamt div behoben, damit es sich beim Scrollen im Browser nicht bewegt. Um dies zu beheben, verwenden wir die Bootstrap-JavaScript-Komponente Affix.

Stellen Sie zunächst sicher, dass Sie die Bootstrap-JavaScript-Datei enthalten haben. Um das Affix-Verhalten hinzuzufügen, fügen Sie einfach das data-spy = "affix" Attribut zum Gesamt div. Optional können wir auch die Position angeben, an der es angebracht werden soll. Lassen Sie es also durch Hinzufügen auf einer bestimmten Höhe von oben bleiben data-offset-top = "20". Nun, wenn Sie stöbern index.html und versuchen Sie, den Browser nach unten zu scrollen, die Summe bleibt oben und immer sichtbar.

Erstellen einer Einkaufswagen-App

Erstellen eines Knotenservers

Beim Erstellen unserer AngularJS-App verwenden wir die ngView-Direktive zum Wechseln der Ansichten. Daher müssen wir die AngularJS-Anwendung auf einem Server ausführen. Daher verwenden wir einen Node.js-Server.

Beginnen wir mit dem Erstellen eines Verzeichnisses für unser Projekt Einkaufswagen. Innerhalb Einkaufswagen Erstellen Sie eine Datei namens server.js. Wir verwenden Express, ein NodeJS-Webanwendungs-Framework, um die Seiten zu rendern. Also installieren ausdrücken mit npm.

npm install express

Wenn Sie express erfolgreich installiert haben, öffnen Sie server.js, benötigen Sie express und erstellen Sie eine App.

'use strict' var express = required ('express'); var app = express ();

Wir halten unsere AngularJS-Dateien in einem separaten Ordner mit dem Namen Öffentlichkeit. Erstellen Sie einen Ordner mit dem Namen Öffentlichkeit. Innerhalb server.js definiere das /Öffentlichkeit und / knotenmodule Pfad.

app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));

Binden Sie anschließend die Anwendung an eine lokale Portadresse.

app.listen ('3000', function () console.log ('Server läuft unter http: // localhost: 3000 !!'))

Starten Sie nun den Node.js-Server und Sie sollten die Nachricht zum Starten des Servers im Terminal erhalten.

Knoten server.js

Wenn Sie jedoch versuchen, http: // localhost: 3000 zu durchsuchen, wird der Fehler angezeigt Kann nicht bekommen / weil wir noch keine Routen definiert haben.

Erstellen einer AngularJS-App

In der Öffentlichkeit Verzeichnis erstellen Sie eine Seite namens main.html. Dies wird als Stammvorlagendatei dienen. Kopieren Sie einfach die index.html Seite, die wir zuvor erstellt haben main.html. Von main.html Entfernen Sie den Inhalt im Körper.

Laden Sie AngularJS herunter und fügen Sie es in ein main.html. Fügen Sie die ngApp-Direktive oben im HTML-Tag hinzu.

In der main.html body, fügen Sie ein div mit der ngView-Direktive hinzu. Nachdem Sie alle oben genannten Änderungen vorgenommen haben, folgen Sie den Anweisungen main.html sieht aus:

   Bootstrap-Shop-Warenkorb

Definieren wir nun unsere Standardseite, die beim Start des Knotenservers gerendert werden soll. Öffnen ShoppingCart / server.js und fügen Sie die folgende Anwendungsroute hinzu, um zur Weiterleitung umzuleiten main.html Seite.

app.get ('/', Funktion (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public');)

Speichern Sie die Änderungen und starten Sie den Knotenserver neu. Richten Sie Ihren Browser auf http: // localhost: 3000 und Sie sollten in der Lage sein, eine leere Seite anzuzeigen, anders als beim letzten Mal, als wir auf derselben Route einen Fehler hatten.

Erstellen einer Einkaufswagenansicht und -route

Als Nächstes integrieren wir das Warenkorbdesign in die AngularJS-App. In der Öffentlichkeit Verzeichnis erstellen Sie einen anderen Ordner namens Wagen. Innerhalb Wagen Erstellen Sie zwei Dateien, cart.html und cart.js. Von unserer Bootstrap-Design-Seite index.html, kopiere den Inhalt im Körper und füge ihn in ein cart.html.

Wir werden es brauchen ngRoute, Installieren Sie es also mit npm.

npm installiere die Winkelroute

Fügen Sie nach der Installation einen Verweis auf hinzu Winkel-Route im main.html.

Aufmachen cart.js und definieren die Wagen Modul.

angle.module ('cart', ['ngRoute'])

Wie im obigen Code zu sehen ist, haben wir die ngRoute Modul, mit dem wir die Routen definieren.

.config (['$ routeProvider', Funktion ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', Controller: 'CartCtrl');])

Verwendung der ngRoute Modul haben wir die definiert /Wagen Route mit der entsprechenden Vorlage und dem Controller. Definieren Sie auch die CartCtrl Controller im Inneren cart.js. Hier ist, wie cart.js sieht aus:

'streng verwenden'; angle.module ('cart', ['ngRoute']) .config (['$ routeProvider', Funktion ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', Controller:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);

Wir benötigen auch eine Root-Datei, um alle Module in unsere AngularJS-Anwendung einzufügen. Also in der Öffentlichkeit Verzeichnis erstellen Sie eine Datei namens app.js. Diese Datei dient als Stammdatei für die AngularJS-Anwendung. Erstellen Sie ein neues Modul mit dem Namen Einkaufswagen Innerhalb app.js und spritzen Sie das Wagenmodul hinein.

angle.module ('shoppingCart', ['ngRoute', 'cart']).

Definieren Sie die Standardroute für die AngularJS-Anwendung /Wagen Innerhalb app.js.

'streng verwenden'; angle.module ('shoppingCart', ['ngRoute', 'cart']). config (['$ routeProvider'), Funktion ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart');]);

Fügen Sie einen Verweis hinzu cart.js und app.js in dem main.html Seite.

Speichern Sie alle Änderungen und starten Sie den Server neu. Richten Sie Ihren Browser auf http: // localhost: 3000, und die Warenkorbseite sollte angezeigt werden.

Wenn Sie nun die Seite nach unten scrollen, wird die Gesamt div bleibt nicht fest. Notieren Sie sich dieses Problem - wir werden es später in der Serie beheben.

Erstellen einer Checkout-Ansicht und einer Route

Erstellen Sie im öffentlichen Verzeichnis einen Ordner mit dem Namen Auschecken. In der Auschecken erstellen Sie zwei Dateien mit dem Namen checkout.html und checkout.js. Öffnen checkout.html und fügen Sie den folgenden HTML-Code hinzu:

   Zitat
 
    Zentralprozessor   Rs. 20000  
   Festplatte   Rs. 5000  
   Gesamt:   Rs. 25000  
 
 
  Anpassen

Öffnen checkout.js und das erstellen Auschecken Modul. Injizieren Sie die ngRoute Modul und definieren Sie die Standardvorlage und ihre Controller-Logik. Hier ist, wie checkout.js endlich sieht aus:

'streng verwenden'; angle.module ('checkout', [ngRoute '])) .config ([' $ routeProvider '), Funktion ($ routeProvider) $ routeProvider.when (' / checkout ', templateUrl:' public / checkout / checkout.html) ', Controller:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', Funktion ($ scope) ]);

Fügen Sie einen Verweis hinzu checkout.js in dem main.html Datei.

Injizieren Sie das Modul Auschecken im app.js so, dass die Einkaufswagen Die AngularJS-Anwendung kennt dieses Modul.

angle.module ('shoppingCart', ['ngRoute', 'cart', 'checkout']).

Speichern Sie die Änderungen und starten Sie den Server neu. Richten Sie Ihren Browser auf http: // localhost: 3000 / # / checkout, und Sie sollten die Checkout-Seite sehen können.

Fazit

In diesem Lernprogramm haben wir unser einfaches Warenkorbdesign in eine AngularJS-Anwendung entwickelt und integriert. Im nächsten Teil dieser Serie erfahren Sie, wie Sie eine benutzerdefinierte Anweisung erstellen, um die erforderliche Funktionalität zu implementieren.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar. Teilen Sie uns Ihre Gedanken, Korrekturen und Vorschläge im Kommentarfeld mit!

Code

Zentralprozessor	Rs. 20000
Festplatte	Rs. 5000
Gesamt:	Rs. 25000