Share
I den forrige delen av denne opplæringsserien opprettet vi et tilpasset direktiv og brukte det i vår enkle handlekurvprogram. I denne delen av opplæringsserien ser vi hvordan du gjør den totale div-platen til toppen mens du ruller nettleseren. Vi lager også en betalingsside hvor vi viser alle elementene valgt av brukeren.
La oss begynne med å klone den forrige delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/AngularShoppingCart_Part2.git
Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularShoppingCart_Part2 npm installere
Når avhengighetene er installert, start serveren
node server.js
Pek nettleseren din til http: // localhost: 3000 / og du bør ha programmet kjører.
Selv om vi bruker bootstrap-påfyllingsdelen for å holde total div på toppen, virker det ikke som forventet. La oss undersøke hva som går galt.
Oppstartskomponentdelen legger til en klasse som kalles feste når vi ruller over en viss høyde og feste-top når det er under. Den fungerer fortsatt i de enkle HTML-sidene, men når det integreres i AngularJS, ser det ikke ut til å fungere. For å fikse dette problemet, fortsetter vi å sjekke rullehøyden, og når den er over og under en viss høyde, si 50 px, legger vi til påføringsklassene tilsvarende.
Så, forutsatt at vi har rullehøyde som bla, Legg til feste og feste-top klasser til Total div ved hjelp av ngClass-direktivet.
ng-class = "'affix': bla> 50, 'affix-top': bla <= 50"
For å få rulle skal vi opprette et annet direktiv. La oss nevne direktivet getScroll. Dette direktivet vil oppdatere bla Verdien hver gang nettleservinduet rulles, og basert på bla Festklassene vil bli oppdatert.
Accentsconagua
.Direktivet ('getScroll', funksjon ($ vindu) return scope: scroll: '= scroll', lenke: funksjon (omfang, element, attrs) var scrollwindow = angular.element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (omfang, funksjon () scope.scroll = scrollwindow.scrollTop ();));;)Som vist i koden ovenfor overfører vi et rullattributt til getScroll direktiv. På rulle beregner vi rullehøyden fra toppen ved hjelp av angular.element ($ vindu). På hver rullehendelse oppdaterer vi bla omfang variabel.
Legg til ovennevnte direktiv til slutten av cart.html side.
Lagre disse endringene og oppdatere siden. Prøv å bla i nettleservinduet og summen skal festes øverst, alltid synlig.
For å fylle ut kassen siden med de valgte elementene, må vi sende elementene mellom kontrollerne. Så vi skal benytte en AngularJS-tjeneste for å overføre dataene mellom kontrollerne. La oss lage en tjeneste som heter CommonProp hvor vi vil lagre de valgte produktene og også den totale prisen. Åpne opp cart.js og opprett en tjeneste som kalles CommonProp som vist:
.service ('CommonProp', funksjon () var Items = "; var Totalt = 0; return getItems: function () return Items;, setItem: funksjon (verdi) Items = value;, getTotal: function ) return Total;, setTotal: funksjon (verdi) Total = verdi;;);Som sett, inne i CommonProp service har vi definert fire funksjoner for å få og sette varer og totalpris. Injiser CommonProp tjeneste i CartCtrl.
.controller ('CartCtrl', ['$ scope', 'CommonProp', funksjon ($ scope, CommonProp) Vi ser etter endringer i shopData variabel og oppdater tjenestedataene tilsvarende. Legg til følgende kode innvendig CartCtrl.
$ scope. $ watch ('shopData', funksjon () CommonProp.setItem ($ scope.shopData);)Innsiden checkout.js, injiser CommonProp tjeneste i CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', funksjon ($ scope, CommonProp) Vi skal bruke CommonProp service for å få varene og totalt i CheckoutCtrl.
.($ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);
Ved hjelp av $ scope.items Vi fyller ut kassen siden. Åpne opp checkout.html og fjern det eksisterende hardkodede bordet. Vi skal gjøre bruk av ngRepeat-direktivet og $ scope.items å lage bordet og fylle det dynamisk.
| I.item | Rs. I.selected |
Lagre endringene ovenfor og oppdater siden. Velg noen elementer, og klikk deretter på Sjekk ut knappen i handlekurven. En gang på kassen siden, bør den vise listen over elementer som er valgt.
La oss også inkludere prisen totalt i kassen siden. Så når summen er beregnet i totalfunksjonen i CartCtrl, oppdater CommonProp total verdi av tjenesten.
$ scope.total = funksjon () var t = 0; for (var k i $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); retur t;
For å vise totalt på kassen siden, ta med følgende tr HTML kode:
Total: Rs. Total
Siden vi oppdaterer Total variabel variabel i CheckoutCtrl, summen vil automatisk bli vist. Lagre endringene og start på nytt. Velg noen elementer og velg kassen. En gang på kassen siden bør du kunne se de valgte elementene og den totale prisen.
En gang på kassen siden, hvis du klikker på Tilpass knappen vil du bli tatt til vogn siden, men alle valgene vil være borte. Så vi må fikse det. Når vogn siden er lastet, vil vi sjekke CommonProp service for eksisterende elementer. Hvis elementer er til stede, bruker vi disse elementene til å fylle på vognsiden.
Innsiden CartCtrl sjekk om noen varer finnes i CommonProp og sett $ scope.shopData.
hvis (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Lagre alle de ovennevnte endringene og start serveren på nytt. Fra vogn siden, velg noen elementer og klikk deretter Sjekk ut å navigere til kassen siden. En gang på kassen siden, klikk på Tilpass knappen for å komme tilbake til handlekurven. Og du bør ha alle valgene som er gjort, som de er, i handlekurven.
I denne delen av opplæringsserien implementerte vi kassen siden og så hvordan du deler data mellom ulike kontrollører ved hjelp av en AngularJS-tjeneste. Vi har også opprettet et direktiv for å få rullehøyden og fikse oppstartsfeilproblemet.
Jeg håper du har lært noe nyttig fra denne opplæringsserien. For mer grundig informasjon angående AngularJS-direktiver, ta en titt på den offisielle dokumentasjonen.
Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker og rettelser i kommentarene nedenfor!
