Share
In deze tutorialserie zullen we zien hoe we een eenvoudig winkelwagentje kunnen maken met AngularJS. Deze tutorialserie zal zich richten op het gebruik van AngularJS-richtlijnen. AngularJS-richtlijnen vormen het kernonderdeel van AngularJS en ze geven speciaal gedrag aan de HTML. Van de officiële documenten:
Op een hoog niveau zijn richtlijnen markeringen op een DOM-element (zoals een kenmerk, elementnaam, opmerking of CSS-klasse) die de HTML-compiler van AngularJS vertellen ($ compile) om een bepaald gedrag aan dat DOM-element te koppelen of zelfs het DOM-element en de onderliggende elementen te transformeren.
We zullen Bootstrap gebruiken om onze pagina te ontwerpen. Zodra we klaar zijn met onze door Bootstrap ontworpen pagina, zullen we deze integreren in onze AngularJS-applicatie. Tijdens het ontwerpen van de pagina zullen we niet ingaan op veel details van Bootstrap, maar we zullen ons op enkele kritieke punten concentreren.
Maak een pagina met de naam index.html. Download en voeg de Bootstrap-bestanden toe aan index.html.
Bootstrap winkelkar
Binnen in de .houder div, maak een .rij div.
In de index.html pagina hebben we twee kolommen. Men heeft een lijst met items met prijzen weergegeven, en de andere kolom heeft de Totaal div. Laten we de twee kolommen maken.
Laten we nu in de eerste kolom enkele items en opties toevoegen.
Paneeltitel
Herhaal de bovenstaande HTML-code een paar keer in de eerste kolom om nog een paar items te hebben. Voeg in de tweede kolom de volgende HTML-code toe om de som van de prijs van geselecteerde items weer te geven.
Totaal
Rs. 100
Uitchecken
Sla de wijzigingen op en blader index.html. Het zou er als volgt uit moeten zien:
Het ziet er prima uit. Maar een ding dat we moeten oplossen, is het maken van de Totaal div hersteld, zodat het niet beweegt wanneer we door de browser scrollen. Om dit op te lossen, gebruiken we de component Bootstrap JavaScript, Affix.
Zorg er eerst voor dat je het Bootstrap JavaScript-bestand hebt toegevoegd. Voeg het toe om het affix-gedrag toe te voegen data-spy = "bevestigen" toeschrijven aan de Totaal div. Optioneel kunnen we ook de positie aangeven die we willen dat deze wordt aangebracht, dus laten we deze op een bepaalde hoogte vanaf de bovenkant houden door toe te voegen -Offset data-top = "20". Nu, als je bladert index.html en probeer in de browser te scrollen, het totaal blijft bovenaan en altijd zichtbaar.
Tijdens het maken van onze AngularJS-app maken we gebruik van de ngView-instructie om van weergave te wisselen. Dus we zullen de AngularJS-applicatie moeten uitvoeren met behulp van een server. Daarom gebruiken we een Node.js-server.
Laten we beginnen met het creëren van een directory voor ons project genaamd Winkelwagen. Binnen Winkelwagen maak een bestand aan met de naam server.js. We zullen Express, een NodeJS webapplicatieframework, gebruiken om de pagina's te renderen. Dus installeer uitdrukken gebruik makend van NPM.
npm install express
Nadat express is geïnstalleerd, opent u server.js, hebt u express nodig en maakt u een app.
Accentsconagua
'gebruik strikt' var express = require ('express'); var app = express ();We houden onze AngularJS-bestanden in een aparte map met de naam openbaar. Maak een map met de naam openbaar. Binnen server.js definieer de /openbaar en / node_modules pad.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));Bind de toepassing vervolgens aan een lokaal poortadres.
app.listen ('3000', function () console.log ('Server draait op http: // localhost: 3000 !!'))Start nu de Node.js-server en u zou het servergestarte bericht in de terminal moeten krijgen.
knooppunt server.js
Maar als u probeert te bladeren door http: // localhost: 3000, wordt de fout weergegeven Kan niet krijgen / omdat we nog geen routes hebben gedefinieerd.
Binnen in de openbaar map maak een pagina genaamd main.html. Dit zal dienen als ons basissjabloonbestand. Kopieer eenvoudig het index.html pagina die we eerder hebben gemaakt main.html. Van main.html verwijder de inhoud in het lichaam.
Download AngularJS en voeg het toe main.html. Voeg de ngApp-richtlijn toe aan de bovenkant van de HTML-tag.
Binnen in de main.html body, voeg een div toe met de opdracht ngView. Na het maken van alle bovenstaande wijzigingen, hier is hoe main.html ziet:
Bootstrap winkelkar
Laten we nu onze standaardpagina definiëren die moet worden weergegeven wanneer de knooppuntserver wordt gestart. Open ShoppingCart / server.js en voeg de volgende applicatieroute toe om door te verwijzen naar de main.html pagina.
app.get ('/', functie (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public');)Sla de wijzigingen op en start de knooppuntserver opnieuw op. Richt uw browser op http: // localhost: 3000 en u zou in staat moeten zijn om een blanco pagina te bekijken, in tegenstelling tot de vorige keer dat er een fout was in dezelfde route.
Laten we vervolgens het ontwerp van de winkelwagen integreren in de AngularJS-app. Binnen in de openbaar map maak een andere map genaamd kar. Binnen kar maak twee bestanden, cart.html en cart.js. Op onze Bootstrap ontwerppagina genoemd index.html, kopieer de inhoud in het lichaam en plak het in cart.html.
We zullen vereisen ngRoute, dus installeer het met NPM.
npm installeer hoek-route
Voeg na installatie een verwijzing toe naar hoekig-route in main.html.
Doe open cart.js en definieer de kar module.
angular.module ('winkelwagen', ['ngRoute'])Zoals te zien is in de bovenstaande code, hebben we de ngRoute module, die we zullen gebruiken om de routes te definiëren.
.config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', controller: 'CartCtrl');])De ... gebruiken ngRoute module, hebben we de / cart route met zijn respectieve sjabloon en controller. Definieer ook de CartCtrl controller binnen cart.js. Hier is hoe cart.js ziet:
'gebruik strikt'; angular.module ('cart', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', controller:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);We hebben ook een rootbestand nodig om alle modules in onze AngularJS-applicatie te injecteren. Dus binnen de openbaar map maak een bestand aan met de naam app.js. Dit bestand zal dienen als het rootbestand voor de AngularJS-applicatie. Maak een nieuwe module genaamd winkelwagen binnen app.js en injecteer de cart-module erin.
angular.module ('shoppingCart', ['ngRoute', 'cart']).Definieer de standaardroute voor de AngularJS-applicatie naar / cart binnen app.js.
'gebruik strikt'; angular.module ('shoppingCart', ['ngRoute', 'cart']). config (['$ routProvider', function ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart');]);Voeg een verwijzing toe aan cart.js en app.js in de main.html pagina.
Sla alle wijzigingen op en start de server opnieuw op. Wijs uw browser naar http: // localhost: 3000 en u moet de winkelwagenpagina laten weergeven.
Nu, als u naar beneden scrolt op de pagina, de Totaal div blijft niet gefixeerd. Houd dit probleem in de gaten, we lossen het later in de serie op.
Maak in de openbare map een map met de naam uitchecken. Binnen in de uitchecken map, maak twee bestanden genaamd checkout.html en checkout.js. Open checkout.html en voeg de volgende HTML-code toe:
Citaat
processor Rs. 20000 Harde schijf Rs. 5000 Totaal: Rs. 25000 Aanpassen
Open checkout.js en maak de uitchecken module. Injecteer de ngRoute module en definieer de standaardsjabloon en de logica van de controller. Hier is hoe checkout.js eindelijk ziet er:
'gebruik strikt'; angular.module ('checkout', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', controller:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', function ($ scope) ]);Vermeld een verwijzing naar checkout.js in de main.html het dossier.
Injecteer de module uitchecken in app.js zodat de winkelwagen De AngularJS-applicatie is op de hoogte van deze module.
angular.module ('shoppingCart', ['ngRoute', 'cart', 'checkout']).Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 / # / checkout en u zou de afrekenpagina kunnen zien.
In deze zelfstudie hebben we ons eenvoudige winkelwagentjeontwerp ontworpen en geïntegreerd in een AngularJS-toepassing. In het volgende deel van deze serie zullen we zien hoe u een aangepaste richtlijn kunt maken om de vereiste functionaliteit te implementeren.
Broncode van deze tutorial is beschikbaar op GitHub. Laat ons uw gedachten, correcties en suggesties weten in het opmerkingenveld hieronder!
