Share
In het vorige deel van deze tutorialserie hebben we een aangepaste richtlijn gemaakt en deze gebruikt in onze eenvoudige winkelwagenapplicatie. In dit deel van de tutorialserie zullen we zien hoe je de totale div aan de top kunt laten blijven tijdens het scrollen in de browser. We maken ook een afrekenpagina waar we alle items tonen die door de gebruiker zijn geselecteerd.
Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularShoppingCart_Part2 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.
Hoewel we de bootstrap-bevestigingscomponent gebruiken om de totale div op de top te houden, werkt deze niet zoals verwacht. Laten we eens kijken wat er fout gaat.
De bootstrap-bevestigingscomponent voegt een klasse toe genaamd affix wanneer we boven een bepaalde hoogte scrollen en aanbrengen-top wanneer het eronder is. Het werkt nog steeds op de eenvoudige HTML-pagina's, maar wanneer het wordt geïntegreerd in AngularJS, lijkt het niet te werken. Om dit probleem te verhelpen, controleren we de schuifhoogte en wanneer deze boven en onder een bepaalde hoogte is, bijvoorbeeld 50 px, voegen we de affixklassen dienovereenkomstig toe.
Dus, ervan uitgaande dat we de schuifhoogte hebben als rol, voeg het toe affix en aanbrengen-top klassen voor de Totaal div met behulp van de ngClass-richtlijn.
ng-class = "'affix': scroll> 50, 'affix-top': scroll <= 50"
Om de schuif te krijgen, maken we een nieuwe richtlijn. Laten we de richtlijn een naam geven getScroll. Deze richtlijn zal de rol waarde elke keer dat het browservenster wordt gescrolled en op basis van rol de affix-klassen worden bijgewerkt.
Accentsconagua
.directive ('getScroll', functie ($ venster) return scope: scroll: '= scroll', link: functie (bereik, element, attrs) var scrollwindow = angular.element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (bereik, functie () scope.scroll = scrollwindow.scrollTop ();));;)Zoals te zien is in de bovenstaande code, geven we een scrolkenmerk door aan de getScroll richtlijn. Bij het scrollen berekenen we de schuifhoogte vanaf de bovenkant met angular.element ($ venster). Op elke scroll-gebeurtenis werken we het rol scoopvariabele.
Voeg de bovenstaande richtlijn toe aan het einde van de cart.html pagina.
Sla deze wijzigingen op en vernieuw de pagina. Probeer in het browservenster te bladeren en het totaal moet bovenaan worden aangebracht, altijd zichtbaar.
Als u de betalingspagina wilt vullen met de geselecteerde items, moeten we de items tussen controllers doorgeven. We maken dus gebruik van een AngularJS-service om de gegevens tussen controllers door te geven. Laten we een service maken met de naam CommonProp waar we de geselecteerde items opslaan en ook de totale prijs. Doe open cart.js en maak een service aan genaamd CommonProp zoals getoond:
.service ('CommonProp', functie () var Items = "; var Total = 0; return getItems: function () return Items;, setItem: function (value) Items = value;, getTotal: function ( ) return Total;, setTotal: function (value) Total = value;;);Zoals te zien, binnen de CommonProp service hebben we vier functies gedefinieerd om de items en de totale prijs te krijgen en in te stellen. Injecteer de CommonProp dienst in de CartCtrl.
.controller ('CartCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) We zullen letten op elke verandering in de shopData variabele en dienovereenkomstig de servicegegevens bij. Voeg de volgende code toe CartCtrl.
$ scope. $ watch ('shopData', function () CommonProp.setItem ($ scope.shopData);)Binnen checkout.js, injecteer de CommonProp dienst in CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) We zullen de gebruiken CommonProp service om items en totaal binnen te krijgen CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);Gebruik makend van $ scope.items we vullen de afrekenpagina in. Doe open checkout.html en verwijder de bestaande hardgecodeerde tabel. We zullen gebruik maken van de ngRepeat-richtlijn en $ scope.items om de tabel te maken en deze dynamisch te vullen.
| I.item | Rs. ik selecteerde |
Sla de bovenstaande wijzigingen op en vernieuw de pagina. Selecteer een paar items en klik vervolgens op de Uitchecken knop in de winkelwagenpagina. Eenmaal op de betaalpagina zou het de lijst met geselecteerde items moeten weergeven.
Laten we ook het prijzentotaal opnemen op de betaalpagina. Dus wanneer het totaal wordt berekend in de totale functie in CartCtrl, werk het CommonProp service totale waarde.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); terugkeer t;
Om het totaal op de afrekenpagina weer te geven, neemt u het volgende op tr HTML code:
Totaal: Rs. totaal
Omdat we de totaal scoopvariabele in CheckoutCtrl, het totaal wordt automatisch weergegeven. Sla de wijzigingen op en start opnieuw. Selecteer een paar items en selecteer afrekenen. Eenmaal op de afrekenpagina zou u de geselecteerde artikelen en de totale prijs kunnen zien.
Als u op de afrekenpagina klikt, klikt u op Aanpassen knop wordt u naar de winkelwagenpagina gebracht, maar alle selecties zijn verdwenen. Dus dat moeten we oplossen. Zodra de winkelwagenpagina is geladen, controleren we de CommonProp service voor bestaande items. Als er items aanwezig zijn, gebruiken we die items om de winkelwagenpagina te vullen.
Binnen CartCtrl controleer of er items zijn in CommonProp en stel de $ scope.shopData.
if (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Selecteer op de winkelwagenpagina een paar items en klik vervolgens op Uitchecken om naar de betaalpagina te gaan. Eenmaal op de uitcheckpagina, klik op de Aanpassen om terug te gaan naar de winkelwagenpagina. En u moet alle selecties hebben gemaakt zoals ze zijn, in de winkelwagenpagina.
In dit deel van de zelfstudiereeks hebben we de afrekenpagina geïmplementeerd en gezien hoe gegevens tussen verschillende controllers kunnen worden gedeeld met behulp van een AngularJS-service. We hebben ook een richtlijn gemaakt om de schuifhoogte te krijgen en het probleem met de bootstrap-affix te verhelpen.
Ik hoop dat je iets nuttigs hebt geleerd uit deze tutorialserie. Raadpleeg de officiële documentatie voor meer informatie over AngularJS-richtlijnen.
Broncode van deze tutorial is beschikbaar op GitHub. Laat ons uw mening en correcties weten in de opmerkingen hieronder!
