Maak een eenvoudig winkelwagentje met AngularJS deel 2

In het vorige deel van deze tutorialserie zagen we hoe je aan de slag kon met het maken van een eenvoudig winkelwagentje met AngularJS. We hebben een eenvoudig ontwerp gemaakt, maar er was niet echt genoeg AngularJS om het een AngularJS-toepassing te noemen. In dit deel van de zelfstudiereeks maken we een aangepaste AngularJS-richtlijn om de vereiste functionaliteit te implementeren.

Ermee beginnen

Laten we beginnen met het klonen van de broncode van de vorige tutorial vanuit GitHub.

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

Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.

cd AngularShoppingCart_Part1 npm installeren

Zodra de afhankelijkheden zijn geïnstalleerd, start u de server.

knooppunt server.js

Richt uw browser op http: // localhost: 3000 / en u zou de applicatie moeten laten draaien.

Een checklist opstellen

In de cart.html pagina worden de items en de opties herhaald. Dus we zullen hiervoor een AngularJS-richtlijn maken die items en de opties ervan zal creëren volgens de gegevens aan de achterkant. Laten we voor het gemak de volgende items in het winkelwagentje bekijken:

['item': 'Hard Disk', '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' , 'selected': 0, 'prices': ['size': '16 \ ", 'price': '3000', 'size': '19 \", 'price': '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 ':' 4 GB ',' prijs ':' 4000 ', ' size ':' 8GB ',' price ':' 8000 '], ' item ':' USB Keyboard ',' id ':' KEY ',' selected ': 0,' prices ': [' size ':' Standard ',' price ':' 2500 ', ' size ':' Advanced ',' price ':' 4500 '] ]

Voeg de volgende gegevens toe binnen de CartCtrl.

$ scope.shopData = ['item': 'Harddisk', 'id': 'HD', 'selected': 0, 'prices': ['size': '200GB', 'price': '2000 ', ' size ':' 400GB ',' price ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prijzen ': ['size': 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Monitor', 'id ':' MON ',' selected ': 0,' prices ': [' size ': '16 \ ",' price ':' 3000 ', ' size ': '19 \",' price ': '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']];

Verwijder de herhaalde .paneel HTML-code van cart.html. We zullen de HTML dynamisch maken met behulp van ngRepeat en $ scope.shopData. Voeg de volgende HTML-code toe aan de eerste kolom van de .rij div. 

 
 
 
 Q.item
 
 
 

Zoals te zien in de bovenstaande code, gebruiken ngRepeat we hebben over itereerd shopData en heeft de HTML gerenderd. Sla de bovenstaande wijzigingen op en start de server opnieuw. Ververs de pagina en je zou in staat moeten zijn de items te bekijken die op de pagina worden getoond.

Vervolgens geven we de beschikbare optie weer samen met een bepaald item, zoals de grootte en prijs (raadpleeg de JSON-gegevens). Voor dat doel zullen we onze eigen aangepaste AngularJS-richtlijn maken. AngularJS-richtlijnen zijn een van de krachtigste functies van AngularJS. Raadpleeg de officiële documenten voor gedetailleerde informatie over AngularJS-richtlijnen.

Laten we een aangepaste richtlijn maken met de naam checklist. Open cart.js en maak een nieuwe richtlijn zoals getoond:

.directive ('checklist', functie () return beperken: 'E', sjabloon: functie (elem, attrs) return '
\ 
\ Optie 1\ 
\ 
\ Optie 2\ 
\ 
\ Optie 2\ 
\ 
'; )

Deze richtlijn heeft de naam checklist. De richtlijn checklist heeft twee parameters, beperken  en sjabloon. Beperken definieert hoe de richtlijn wordt aangeroepen. Omdat we E hebben gedefinieerd, wordt deze als elementnaam genoemd, zoals:

De sjabloon veld heeft de HTML-code gedefinieerd die de checklist richtlijn op de pagina. We hebben dezelfde statische HTML-code gebruikt die we eerder hadden. Bel nu de richtlijn checklist op de cart.html pagina.

 
 
 Q.item
 
  

Sla de bovenstaande wijzigingen op en vernieuw de winkelwagenpagina. U zou de statische HTML-opties op de winkelwagenpagina moeten kunnen bekijken.

Laten we nu de richtlijn gegevens laten uitlezen $ scope.shopData. Ten eerste, in plaats van de opties in de richtlijn te herhalen, gebruiken we ngRepeat om de opties te herhalen. Wijzig de richtlijn checklist zoals getoond om het dynamisch te maken.

sjabloon: functie (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Zoals je kunt zien in de bovenstaande code, verwachten we de keuze worden doorgegeven aan de richtlijn. Dus van het HTML-gedeelte moeten we een attribuut definiëren voor de checklist richtlijn genoemd keuze en geef de vereiste gegevens door. Voeg de toe keuze in cart.html zoals getoond:

 
 
 Q.item
 
  

Om toegang te krijgen tot de gepasseerde keuze in de richtlijn moeten we de reikwijdte definiëren. Binnen in de checklist richtlijn definiëren strekking zoals getoond:

.directive ('checkList', function () return beperken: 'E', scope: option: '=', template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'; )

Op deze manier de prijslijst van verschillende items van $ scope.shopData wordt doorgegeven in de richtlijn. Sla de bovenstaande wijzigingen op en start de server opnieuw. Ververs de pagina en u zou de grootte en prijs van elk item als opties op de pagina moeten kunnen bekijken.

Als u nu op de keuzerondjeoptie voor een bepaald item klikt, worden beide geselecteerd. Om ervoor te zorgen dat één item tegelijk wordt geselecteerd, groeperen we de keuzerondjes. Daarvoor moeten we een ander passeren naam ken de richtlijn toe vanuit de HTML-weergave. Dus voeg een nieuwe toe naam attribuut aan check-list van het uitzicht. We zullen het item doorgeven ID kaart als de naam, omdat het uniek is voor elk item.

Voeg nu een andere variabele toe aan de scope van de richtlijn om deze toegankelijk te maken in de richtlijnenjabloon.

bereik: option: '=', naam: '='

Binnen de richtlijn sjabloon HTML, voeg de ingevoerde naam toe als de naam van de radioknop die de keuzerondjes van bepaalde items zou groeperen.

Sla de wijzigingen op en vernieuw de pagina. Probeer de keuzerondjes voor een bepaald item te selecteren en u kunt er maar één tegelijk selecteren.
Het totaal berekenen op basis van de geselecteerde opties
Op basis van de items die door de gebruiker zijn geselecteerd, moeten we een totaal van de prijs van alle geselecteerde items weergeven. Daarvoor maken we een $ scope functie genoemd totaal, welke de totale prijs zal samenvatten. Telkens wanneer een gebruiker een item selecteert, werken we de variabele bij die is geselecteerd in de $ scope.shopData JSON. Vervolgens wordt deze JSON geïtereerd om de totale prijs van de geselecteerde items te krijgen. Hier is de totaal functie.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  retourneer t; 
Op dit moment tonen we een hard-gecodeerde waarde van Rs 100 in de totale div. In plaats daarvan bellen we gewoon de totale functie.
Rs. totaal()
Sla de wijzigingen op en vernieuw de pagina. Als u de verschillende opties probeert te selecteren, verandert het totaal niet echt. Het komt omdat de beginwaarde van de gekozen variabele in JSON is 0 en wordt niet bijgewerkt bij selectie. Dus laten we de geselecteerde waarde van JSON doorgeven aan de richtlijn en deze bijwerken wanneer het keuzerondje is geselecteerd. Wijzig de HTML-weergave zodat er nog één wordt toegevoegd gekozen toeschrijven aan de checklist richtlijnelement. 
Toevoegen gekozen aan de richtlijn om binnen de richtlijn toegang te krijgen tot deze richtlijn.
bereik: option: '=', naam: '=', geselecteerd: '= geselecteerd'
We zullen beginnen gekozen naar het keuzerondje ngModel richtlijn en de i.price naar de ngValue richtlijn. Wanneer het keuzerondje is geselecteerd, wordt de waarde daarom bijgewerkt in de gekozen attribuut van de $ scope.shopData JSON. 
Sla de bovenstaande wijzigingen op en vernieuw de pagina. Probeer de keuzerondjes te selecteren en op basis van de selectie de Totaal prijs moet worden bijgewerkt.
Conclusie
In dit deel van de tutorialserie hebben we een aangepaste richtlijn gemaakt en deze gebruikt in onze eenvoudige winkelwagenapplicatie. In het volgende deel van deze serie zullen we zien hoe je de totale div altijd bovenaan laat staan ​​tijdens het scrollen naar beneden. We implementeren ook de betaalpagina waar de geselecteerde artikelen en prijzen worden weergegeven met een knop terug naar de winkelwagenpagina om de selectie aan te passen.
Broncode van deze tutorial is beschikbaar op GitHub. Laat ons uw mening of eventuele correcties in de onderstaande opmerkingen weten!



		
			
	   
	




Code