Share
I denne opplæringsserien ser vi hvordan du skal lage en enkel handlekurv ved hjelp av AngularJS. Denne opplæringsserien vil fokusere på bruken av AngularJS-direktiver. AngularJS-direktiver er kjernedelen av AngularJS, og de gir spesiell oppførsel til HTML. Fra de offisielle dokumentene:
På et høyt nivå er direktiver markører på et DOM-element (for eksempel et attributt, elementnavn, kommentar eller CSS-klasse) som forteller AngularJSs HTML-kompilator ($ kompilere) for å legge ved en spesifisert oppførsel til det DOM-elementet eller til og med forvandle DOM-elementet og dets barn.
Vi bruker Bootstrap til å designe vår side. Når vi er ferdige med vår Bootstrap-designside, integrerer vi den i vårt AngularJS-program. Ved utformingen av siden vil vi ikke gå inn i mye detaljer om Bootstrap, men vi vil fokusere på noen kritiske punkter.
Opprett en side som heter index.html. Last ned og ta med Bootstrap-filene til index.html.
Bootstrap Shop Cart
Inne i .container div, opprett en .rad div.
I index.html side, vi har to kolonner. Man vil ha en liste over varer med priser som vises, og den andre kolonnen vil ha Total div. Så la oss lage de to kolonnene.
Nå legger vi til noen få ting og alternativer i den første kolonnen.
Paneltittel
Replikk HTML koden ovenfor noen ganger i den første kolonnen for å få noen flere elementer. I den andre kolonnen legger du til følgende HTML-kode for å vise summen av prisen på de valgte elementene.
Total
Rs. 100
Sjekk ut
Lagre endringene og bla gjennom index.html. Det skal se ut som:
Det ser bra ut. Men en ting vi må fikse er å lage Total div fast, slik at den ikke beveger seg når vi ruller nettleseren. For å fikse det, bruker vi Bootstrap JavaScript-komponenten, Affix.
Først må du kontrollere at du har tatt med Bootstrap JavaScript-filen. For å legge til tilknytningsadferd, legger du ganske enkelt til data-spion = "feste" attributt til Total div. Eventuelt kan vi også spesifisere posisjonen vi ønsker at den skal festes på, så la oss holde den i en viss høyde fra toppen ved å legge til data-offset-top = "20". Nå, hvis du surfer index.html og prøv å bla ned i nettleseren, resten forblir øverst og alltid synlig.
Mens du lager vår AngularJS-app, bruker vi ngView-direktivet for å bytte visning. Så vi må kjøre AngularJS-applikasjonen ved hjelp av en server. Derfor bruker vi en Node.js-server.
La oss starte med å lage en katalog for vårt prosjekt som heter Handlevogn. Innsiden Handlevogn opprett en fil som heter server.js. Vi bruker Express, en NodeJS webapplikasjonsramme, for å gjengi sidene. Så installer uttrykke ved hjelp av NPM.
npm installere express
Når ekspress er installert, må du åpne server.js, kreve uttrykk og opprette en app.
Accentsconagua
'bruk strenge' var express = kreve ('express'); var app = express ();Vi vil holde våre AngularJS-filer i en egen mappe som heter offentlig. Opprett en mappe som heter offentlig. Innsiden server.js definere /offentlig og / node_modules sti.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));Deretter bind programmet til en lokal portadresse.
app.listen ('3000', funksjon () console.log ('Server kjører på http: // localhost: 3000 !!'))Start nå Node.js-serveren, og du bør få serverens startmelding i terminalen.
node server.js
Men hvis du prøver å bla http: // localhost: 3000 vil det vise feilen Kan ikke få / fordi vi ikke har definert noen ruter ennå.
Inne i offentlig katalog opprette en side som heter main.html. Dette vil fungere som vår rotmalerfil. Bare kopier index.html side som vi tidligere har opprettet main.html. Fra main.html fjern innholdet inne i kroppen.
Last ned AngularJS og inkludere den i main.html. Legg til ngApp-direktivet øverst på HTML-taggen.
Inne i main.html kropp, legg til en div med ngView-direktivet. Etter å ha gjort alle de ovennevnte endringene, er det slik main.html utseende:
Bootstrap Shop Cart
La oss nå definere vår standardside for å gjengi når nodeserveren er startet. Åpen Handlekurv / server.js og legg til følgende programrute for å omdirigere til main.html side.
app.get ('/', funksjon (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public');)Lagre endringene og start nodeserveren på nytt. Pek nettleseren din til http: // localhost: 3000, og du bør kunne se en tom side, i motsetning til siste gang da vi hadde en feil på samme rute.
Deretter la vi integrere handlekurvdesignet i AngularJS-appen. Inne i offentlig katalog opprette en annen mappe som heter kurven. Innsiden kurven opprett to filer, cart.html og cart.js. Fra vår Bootstrap design side kalles index.html, kopier innholdet inne i kroppen og lim inn cart.html.
Vi vil kreve ngRoute, så installer den med NPM.
npm installere vinkelrute
Når du er installert, legg til en referanse til vinkel-rute i main.html.
Åpne opp cart.js og definer kurven modul.
angular.module ('cart', ['ngRoute'])Som vist i koden ovenfor har vi injisert ngRoute modul, som vi skal bruke til å definere ruter.
.config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', kontroller: 'CartCtrl' ;;Bruker ngRoute modul, har vi definert / cart rute med sin respektive mal og kontroller. Definer også CartCtrl kontroller inne cart.js. Her er hvordan cart.js utseende:
'bruk streng'; angular.module ('cart', ['ngRoute']) .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', kontroller:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);Vi må også ha en rotfil for å injisere alle modulene i vårt AngularJS-program. Så inne i offentlig katalog opprette en fil som heter app.js. Denne filen vil fungere som rotfilen for AngularJS-programmet. Opprett en ny modul som heter handlevogn innsiden app.js og injiser kurvmodulen i den.
angular.module ('shoppingCart', ['ngRoute', 'cart']).Definer standardruten for AngularJS-applikasjonen til / cart innsiden app.js.
'bruk streng'; angular.module ('shoppingCart', ['ngRoute', 'cart']). config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart');]);Legg til en referanse til cart.js og app.js i main.html side.
Lagre alle endringene og start serveren på nytt. Pek nettleseren din til http: // localhost: 3000, og du bør ha siden med handlevogn vist.
Nå, hvis du ruller nedover siden, vil Total div forblir ikke fast. Vær oppmerksom på dette problemet, vi løser det senere i serien.
Inne i den offentlige katalogen, opprett en mappe som heter Sjekk ut. Inne i Sjekk ut mappe, opprett to filer som heter checkout.html og checkout.js. Åpen checkout.html og legg til følgende HTML-kode:
Sitat
prosessor Rs. 20000 Hardisk Rs. 5000 Total: Rs. 25000 Tilpass
Åpen checkout.js og opprett Sjekk ut modul. Injiser ngRoute modul og definer standardmalen og dens styringslogikk. Her er hvordan checkout.js endelig ser ut:
'bruk streng'; angular.module ('checkout', ['ngRoute']) .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', kontroller:' CheckoutCtrl ');] .controller (' CheckoutCtrl ', [' $ scope ', funksjon ($ scope) ]);Inkluder en referanse til checkout.js i main.html fil.
Injiser modulen Sjekk ut i app.js slik at handlevogn AngularJS-programmet er klar over denne modulen.
angular.module ('shoppingCart', ['ngRoute', 'cart', 'checkout']).Lagre endringene og start serveren på nytt. Pek nettleseren din til http: // localhost: 3000 / # / checkout, og du bør kunne se kassen siden.
I denne opplæringen designet og integrert vi vår enkle handlekurvdesign i en AngularJS-applikasjon. I neste del av denne serien ser vi hvordan du oppretter et tilpasset direktiv for å implementere den nødvendige funksjonaliteten.
Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker, rettelser og forslag i kommentarfeltet nedenfor!
