Share
În această serie de tutori, vom vedea cum să realizăm un simplu coș de cumpărături folosind AngularJS. Această serie de tutori se va concentra asupra utilizării directivelor AngularJS. Directivele AngularJS sunt partea esențială a AngularJS și conferă un comportament special HTML-ului. Din documentele oficiale:
La un nivel înalt, directivele sunt markeri pe un element DOM (cum ar fi un atribut, nume de element, comentariu sau clasa CSS) care spun compilatorul HTML al AngularJS ($ compilarii) pentru a atașa un comportament specific elementului DOM sau chiar a transforma elementul DOM și copiii acestuia.
Vom folosi Bootstrap pentru a proiecta pagina noastră. Odată ce terminăm cu pagina noastră concepută pentru Bootstrap, o vom integra în aplicația AngularJS. În timp ce proiectăm pagina, nu vom trece în detaliu despre Bootstrap, dar ne vom concentra pe câteva puncte critice.
Creați o pagină numită index.html. Descărcați și includeți fișierele Bootstrap la index.html.
Bootstrap Cosul de cumparaturi
În interiorul .recipient div, creează un .rând div.
În index.html , vom avea două coloane. Unul va avea o listă cu articole afișate, iar cealaltă coloană va avea Total div. Deci, să creăm cele două coloane.
Acum, în prima coloană, să adăugăm câteva elemente și opțiuni.
Titlul panoului
Replicați codul HTML de mai sus de câteva ori în prima coloană pentru a avea mai multe elemente. În a doua coloană, adăugați următorul cod HTML pentru a afișa suma prețului elementelor selectate.
Total
Rs. 100
Verifică
Salvați modificările și răsfoiți index.html. Ar trebui să arate:
Arată bine. Dar un lucru pe care trebuie să-l rezolvăm este acela de a face Total div fix, astfel încât să nu se miște când defilam browserul. Pentru a rezolva asta, vom folosi componenta JavaScript Bootstrap, Affix.
Mai întâi asigurați-vă că ați inclus fișierul JavaScript Bootstrap. Pentru a adăuga comportamentul de atașare, pur și simplu adăugați date-spion = „aplice“ atribut la Total div. Opțional, putem specifica și poziția pe care dorim să o aplicăm, așa că păstrați-o la o anumită înălțime din partea de sus prin adăugarea offset date-top = "20". Acum, dacă răsfoiți index.html și încercați să derulați în jos browser-ul, totalul rămâne în partea de sus și întotdeauna vizibil.
În timp ce creăm aplicația noastră AngularJS, vom folosi directiva ngView pentru a schimba vizualizările. Deci, va trebui să rulați aplicația AngularJS folosind un server. Prin urmare, vom folosi un server Node.js.
Să începem prin crearea unui director pentru proiectul nostru numit Cărucior de cumpărături. Interior Cărucior de cumpărături creați un fișier numit server.js. Vom folosi Express, un cadru de aplicații web NodeJS, pentru a reda paginile. Așa că instalați expres utilizând NPM.
npm install express
Odată ce programul Express este instalat cu succes, deschideți server.js, solicitați expres și creați o aplicație.
Accentsconagua
"utilizarea strictă" var express = necesită ("expres"); var app = expres ();Vom păstra fișierele AngularJS într-un director separat numit public. Creați un dosar numit public. Interior server.js defini /public și / node_modules cale.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', expres.static (__dirname + '/ node_modules'));Apoi, legați aplicația de o adresă locală a portului.
app.listen ('3000', function () console.log ('Server care rulează la http: // localhost: 3000 !!'))Acum, porniți serverul Node.js și trebuie să primiți mesajul inițiat de server în terminal.
nod server.js
Dar dacă încercați să căutați http: // localhost: 3000, acesta va afișa eroarea Nu se poate obține / pentru că nu am definit încă căile.
În interiorul public director crea o pagină numită main.html. Acest lucru va servi ca fișier șablon rădăcină. Pur și simplu copiați index.html pagina pe care am creat-o mai devreme main.html. Din main.html eliminați conținutul din interiorul corpului.
Descărcați AngularJS și includeți-l în main.html. Adăugați directiva ngApp în partea de sus a etichetei HTML.
În interiorul main.html corp, adăugați div cu directiva ngView. După ce ați făcut toate modificările de mai sus, iată cum main.html arată:
Bootstrap Cosul de cumparaturi
Acum, să definim pagina noastră implicită pentru a reda când serverul nod este pornit. Deschis ShoppingCart / server.js și adăugați următoarea rută de aplicații pentru a redirecționa către main.html pagină.
app.get ('/', funcția (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public')Salvați modificările și reporniți serverul de noduri. Punctați browserul la http: // localhost: 3000 și ar trebui să puteți vedea o pagină goală, spre deosebire de ultima dată când am avut o eroare pe același traseu.
Apoi, să integrăm designul coșului de cumpărături în aplicația AngularJS. În interiorul public directorul crea un alt dosar numit cart. Interior cart creați două fișiere, cart.html și cart.js. Din pagina noastră de design Bootstrap numită index.html, copiați conținutul în interiorul corpului și lipiți-l cart.html.
Vom fi obligați ngRoute, așa că instalați-l folosind NPM.
npm instala unghiul-ruta
Odată instalat, adăugați o referință la unghiular-route în main.html.
Deschide cart.js și să definească cart modul.
angular.module ("cart", ['ngRoute])După cum se vede în codul de mai sus, am injectat ngRoute modul pe care îl vom folosi pentru a defini rutele.
.config (['$ routeProvider', functie ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html'Utilizarea ngRoute modul, am definit /cart traseu cu șablonul și controlerul respectiv. De asemenea, definiți CartCtrl controler înăuntru cart.js. Iată cum cart.js arată:
"utilizarea strictă"; ('cart', 'ngRoute')) .config (['$ routeProvider', functie ($ routeProvider) $ routeProvider.when ('cart', templateUrl: public / cart / cart.html ', controler:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);Va trebui, de asemenea, să avem un fișier rădăcină pentru a injecta toate modulele în aplicația AngularJS. Deci, în interiorul public directorul crea un fișier numit app.js. Acest fișier va servi ca fișier rădăcină pentru aplicația AngularJS. Creați un nou modul numit cărucior de cumpărături interior app.js și injectați modulul cărucior în el.
angular.module ("shoppingCart", ['ngRoute', 'cart')).Definiți ruta implicită pentru aplicația AngularJS la /cart interior app.js.
"utilizarea strictă"; angular.module ("shoppingCart", ['ngRoute', 'cart']). config (['$ routeProvider', functie ($ routeProvider) $ routeProvider.otherwise redirectTo: '/ cart');]);Adăugați o referință la cart.js și app.js în main.html pagină.
Salvați toate modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 și ar trebui să afișați pagina de coș.
Acum, dacă parcurgeți pagina în jos, faceți clic pe Total div nu rămâne fix. Luați notă de această problemă - o vom remedia mai târziu în serie.
În directorul public, creați un dosar numit verifică. În interiorul verifică folder, creați două fișiere numite checkout.html și checkout.js. Deschis checkout.html și adăugați următorul cod HTML:
Citat
Procesor Rs. 20000 Hard disk Rs. 5000 Total: Rs. 25000 Personalizați
Deschis checkout.js și creați verifică modul. Injectați ngRoute modul și să definească șablonul implicit și logica controlerului acestuia. Iată cum checkout.js în cele din urmă arată:
"utilizarea strictă"; "$ routeProvider", funcția ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', controler:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', functie ($ scope) ]);Includeți o referință la checkout.js în main.html fişier.
Injectați modulul verifică în app.js astfel încât cărucior de cumpărături Aplicația AngularJS este conștientă de acest modul.
angular.module ("shoppingCart", ['ngRoute', 'cart', 'checkout']).Salvați modificările și reporniți serverul. Punctați-vă browserul la http: // localhost: 3000 / # / checkout și ar trebui să puteți vedea pagina de checkout.
În acest tutorial, am conceput și integrat designul nostru simplu de coș de cumpărături într-o aplicație AngularJS. În următoarea parte a acestei serii, vom vedea cum să creăm o directivă personalizată pentru a implementa funcționalitatea necesară.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile, corecțiile și sugestiile în caseta de comentarii de mai jos!
