Share
În partea anterioară a acestei serii de tutorial, am creat o directivă personalizată și am folosit-o în aplicația noastră simplă de cumpărături. În această parte a seriei de tutori, vom vedea cum să facem ca divulgarea totală să fie în partea de sus în timpul derulării browserului. De asemenea, vom crea o pagină de checkout unde vom afișa toate elementele selectate de utilizator.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularShoppingCart_Part2 npm instalare
După instalarea dependențelor, porniți serverul
nod server.js
Punctați browserul la http: // localhost: 3000 / și ar trebui să aveți aplicația să ruleze.
Deși folosim componenta de atașare a bootstrap-ului pentru a păstra div total pe partea de sus, nu funcționează așa cum era de așteptat. Să examinăm ce se întâmplă greșit.
Componenta de atașare a bootstrap-ului adaugă o clasă numită afix când defilam peste o anumită înălțime și aplice-top când e mai jos. Acesta funcționează în continuare în paginile HTML simple, dar când este integrat în AngularJS, nu pare să funcționeze. Pentru a rezolva această problemă, vom păstra o verificare a înălțimii de defilare și atunci când este deasupra și sub o anumită înălțime, spunem 50 px, vom adăuga în consecință clasele de afix.
Deci, presupunând că avem înălțimea de defilare ca sul, adaugă afix și aplice-top clase la Total div folosind directiva ngClass.
ng-class = "'affix': defilați> 50, 'affix-top': derulați <= 50"
Pentru a obține parola vom crea o altă directivă. Să numim directiva getScroll. Această directivă va actualiza sul valoare de fiecare dată când fereastra browserului este derulată și bazată pe sul clasele de aplicație vor fi actualizate.
Accentsconagua
.directive ('getScroll', functie (fereastra $) return scop: scroll: '= scroll', link: function (scope, element, attrs) var scrollwindow = angular.element ("scroll", scop) $ apply.bind (scope, function () scope.scroll = scrollwindow.scrollTop (););;)După cum se vede în codul de mai sus, trecem un atribut de defilare la getScroll directivă. În timpul derulării, se calculează înălțimea de defilare din partea de sus cu ajutorul angular.element (fereastră $). La fiecare eveniment de defilare actualizăm sul variabilă de domeniu.
Adăugați directiva de mai sus la sfârșitul secțiunii cart.html pagină.
Salvați aceste modificări și actualizați pagina. Încercați să derulați fereastra browserului, iar totalul trebuie să fie aplicat pe partea de sus, întotdeauna vizibil.
Pentru a popula pagina de control cu elementele selectate, va trebui să trecem elementele între controale. Deci vom folosi un serviciu AngularJS pentru a transmite datele între controlori. Să creăm un serviciu numit CommonProp unde vom salva elementele selectate și, de asemenea, prețul total. Deschide cart.js și să creeze un serviciu numit CommonProp așa cum se arată:
.() return = returns ;;; setItem: funcția (valoare) Items = value;; getTotal: ) retur total;, setTotal: funcție (valoare) Total = valoare;;);
După cum se vede, în interiorul CommonProp serviciu am definit patru funcții pentru a obține și seta elementele și prețul total. Injectați CommonProp serviciul în CartCtrl.
.controler ("CartCtrl", ['$ scope', 'CommonProp', funcție ($ scope, CommonProp) Vom urmări orice schimbare în shopData variabile și să actualizeze datele de serviciu în consecință. Adăugați următorul cod în interior CartCtrl.
$ watch ('shopData', funcția () CommonProp.setItem ($ scope.shopData);)Interior checkout.js, injectați CommonProp serviciu în CheckoutCtrl.
.controler ("CheckoutCtrl", ['$ scope', 'CommonProp', funcție ($ scope, CommonProp) Vom folosi CommonProp serviciu pentru a obține elementele și totalul în CheckoutCtrl.
.controler ("CheckoutCtrl", ['$ scope', 'CommonProp', functie ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);Utilizarea $ scope.items vom popula pagina de casă. Deschide checkout.html și eliminați tabelul existent. Vom folosi directiva ngRepeat și $ scope.items pentru a crea tabela și a o popula dinamic.
| I.item | Rs. am selectat |
Salvați modificările de mai sus și actualizați pagina. Selectați câteva elemente și apoi faceți clic pe Verifică pe pagina de coș. O dată pe pagina de control, ar trebui să afișeze lista articolelor selectate.
Să includeți, de asemenea, prețul total în pagina de casă. Deci, atunci când totalul este calculat în funcția totală în CartCtrl, actualizați CommonProp valoarea totală a serviciului.
$ scope.total = funcție () var t = 0; pentru (var k în $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selectat); CommonProp.setTotal (t); retur t;
Pentru a afișa totalul pe pagina de casă, includeți următoarele tr Cod HTML:
Total: Rs. total
Deoarece actualizăm total variabila de domeniu în CheckoutCtrl, totalul va fi afișat automat. Salvați modificările și începeți din nou. Selectați câteva elemente și selectați checkout. Odată ce ați ajuns pe pagina de plată, ar trebui să vedeți elementele selectate și prețul total.
Odată ce ați ajuns pe pagina de plată, dați clic pe Personalizați butonul va fi dus la pagina de coș, dar toate selecțiile vor dispărea. Așa că trebuie să rezolvăm asta. Odată ce pagina de încărcare este încărcată, vom verifica CommonProp serviciu pentru orice articole existente. Dacă sunt prezente elemente, atunci vom folosi acele elemente pentru a popula pagina de coș.
Interior CartCtrl verificați dacă există elemente în CommonProp și setați $ scope.shopData.
dacă CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Salvați toate modificările de mai sus și reporniți serverul. Din pagina de coș, selectați câteva elemente, apoi faceți clic pe Verifică pentru a naviga la pagina de control. Odată pe pagina de control, faceți clic pe Personalizați pentru a reveni la pagina de coș. Și ar trebui să aveți toate selecțiile făcute, așa cum sunt, în pagina de coș.
În această parte a seriei tutorial, am implementat pagina de control și am văzut cum să împărtășim date între diferite controlere utilizând un serviciu AngularJS. Am creat, de asemenea, o directivă pentru a obține înălțimea de defilare și a corecta problema de fixare a bootstrapului.
Sper că ați învățat ceva util din această serie de tutori. Pentru informații mai detaliate referitoare la directivele AngularJS, consultați documentația oficială.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile și corecțiile în comentariile de mai jos!
