Share
In questa serie di tutorial, vedremo come creare un carrello semplice utilizzando AngularJS. Questa serie di tutorial si concentrerà sull'uso delle direttive AngularJS. Le direttive AngularJS sono la parte centrale di AngularJS e impartiscono un comportamento speciale all'HTML. Dai documenti ufficiali:
Ad un livello elevato, le direttive sono marcatori su un elemento DOM (come un attributo, un nome di elemento, un commento o una classe CSS) che indicano al compilatore HTML di AngularJS ($ compilazione) per collegare un comportamento specificato a quell'elemento DOM o persino trasformare l'elemento DOM e i suoi figli.
Useremo Bootstrap per progettare la nostra pagina. Una volta che abbiamo finito con la nostra pagina progettata da Bootstrap, la integreremo nella nostra applicazione AngularJS. Durante la progettazione della pagina non entreremo nei dettagli di Bootstrap, ma ci concentreremo su alcuni punti critici.
Crea una pagina chiamata index.html. Scarica e includi i file Bootstrap in index.html.
Carrello del negozio di avvio
Dentro il .contenitore div, crea a .riga div.
Nel index.html pagina, avremo due colonne. Uno avrà una lista di articoli con prezzi visualizzati, e l'altra colonna avrà il Totale div. Quindi creiamo le due colonne.
Ora, nella prima colonna aggiungiamo alcuni elementi e opzioni.
Titolo del pannello
Replica il codice HTML sopra riportato alcune volte nella prima colonna per aggiungere altri elementi. Nella seconda colonna, aggiungi il seguente codice HTML per mostrare la somma del prezzo degli articoli selezionati.
Totale
Rs. 100
Check-out
Salva le modifiche e sfoglia index.html. Dovrebbe assomigliare a:
Sembra a posto Ma una cosa che dobbiamo risolvere è fare il Totale div fisso, in modo che non si muova quando si scorre il browser. Per risolvere questo problema, utilizzeremo il componente JavaScript Bootstrap, Affix.
Per prima cosa assicurati di aver incluso il file JavaScript Bootstrap. Per aggiungere il comportamento affisso, è sufficiente aggiungere il Dati-spia = "apporre" attributo al Totale div. Opzionalmente, possiamo anche specificare la posizione che vogliamo che apponga, quindi teniamolo ad una certa altezza dall'alto aggiungendo dati-offset-top = "20". Ora, se navighi index.html e prova a scorrere verso il basso il browser, il totale rimane in alto e sempre visibile.
Durante la creazione della nostra app AngularJS, utilizzeremo la direttiva ngView per cambiare visualizzazione. Quindi avremo bisogno di eseguire l'applicazione AngularJS usando un server. Quindi useremo un server Node.js.
Iniziamo creando una directory per il nostro progetto chiamato Carrello della spesa. Dentro Carrello della spesa crea un file chiamato server.js. Useremo Express, un framework per applicazioni web NodeJS, per il rendering delle pagine. Quindi installare esprimere utilizzando npm.
npm install express
Una volta installato con successo express, apri server.js, richiedi express e crea un'app.
Accentsconagua
'use strict' var express = require ('express'); var app = express ();Manterremo i nostri file AngularJS in una cartella separata chiamata pubblico. Crea una cartella chiamata pubblico. Dentro server.js definire il /pubblico e / node_modules sentiero.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));Quindi, associare l'applicazione a un indirizzo di porta locale.
app.listen ('3000', function () console.log ('Server in esecuzione su http: // localhost: 3000 !!'))Ora avvia il server Node.js e dovresti ricevere il messaggio avviato dal server nel terminale.
nodo server.js
Ma se provi a navigare su http: // localhost: 3000 mostrerà l'errore Non può ottenere / perché non abbiamo ancora definito percorsi.
Dentro il pubblico directory crea una pagina chiamata main.html. Questo servirà da file modello radice. Basta copiare il index.html pagina in cui abbiamo creato precedentemente main.html. A partire dal main.html rimuovere il contenuto all'interno del corpo.
Scarica AngularJS e includilo main.html. Aggiungi la direttiva ngApp all'inizio del tag HTML.
Dentro il main.html corpo, aggiungi un div con la direttiva ngView. Dopo aver apportato tutte le modifiche sopra elencate, ecco come main.html sembra:
Carrello del negozio di avvio
Ora, definiamo la pagina predefinita da rendere quando viene avviato il server nodo. Aperto ShoppingCart / server.js e aggiungere il seguente percorso dell'applicazione per reindirizzare a main.html pagina.
app.get ('/', function (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public');)Salvare le modifiche e riavviare il server del nodo. Indirizza il tuo browser a http: // localhost: 3000 e dovresti riuscire a visualizzare una pagina vuota, diversamente dall'ultima volta in cui abbiamo avuto un errore nello stesso percorso.
Quindi, integriamo il design del carrello acquisti nell'app AngularJS. Dentro il pubblico directory crea un'altra cartella chiamata carrello. Dentro carrello crea due file, cart.html e cart.js. Dalla nostra pagina di design Bootstrap chiamata index.html, copia il contenuto all'interno del corpo e incolla cart.html.
Avremo bisogno ngRoute, quindi installalo usando npm.
npm installa percorso angolare
Una volta installato, aggiungi un riferimento a angolare percorso nel main.html.
Aprire cart.js e definire il carrello modulo.
angular.module ('cart', ['ngRoute'])Come visto nel codice sopra, abbiamo iniettato il ngRoute modulo, che useremo per definire i percorsi.
.config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', controller: 'CartCtrl');])Usando il ngRoute modulo, abbiamo definito il /carrello percorso con il rispettivo modello e controller. Inoltre, definire il CartCtrl controller interno cart.js. Ecco come cart.js sembra:
'usare rigoroso'; angular.module ('cart', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', controller:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);Avremo anche bisogno di avere un file root per iniettare tutti i moduli nella nostra applicazione AngularJS. Quindi dentro pubblico directory crea un file chiamato app.js. Questo file servirà come file root per l'applicazione AngularJS. Crea un nuovo modulo chiamato carrello della spesa dentro app.js e inietti il modulo cart in esso.
angular.module ('shoppingCart', ['ngRoute', 'carrello']).Definire la rotta predefinita per l'applicazione AngularJS su /carrello dentro app.js.
'usare rigoroso'; angular.module ('shoppingCart', ['ngRoute', 'carrello']). config (['$ routeProvider', function ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart');]);Aggiungi un riferimento a cart.js e app.js nel main.html pagina.
Salva tutte le modifiche e riavvia il server. Indirizza il tuo browser a http: // localhost: 3000 e dovresti visualizzare la pagina del carrello.
Ora, se si scorre verso il basso la pagina, il Totale div non rimane fisso. Tieni nota di questo problema: lo sistemeremo più avanti nella serie.
All'interno della directory pubblica, creare una cartella chiamata check-out. Dentro il check-out cartella, creare due file chiamati checkout.html e checkout.js. Aperto checkout.html e aggiungi il seguente codice HTML:
Quotazione
processore Rs. 20000 Disco rigido Rs. 5000 Totale: Rs. 25000 personalizzare
Aperto checkout.js e creare il check-out modulo. Inietti il ngRoute modulo e definire il modello predefinito e la sua logica del controllore. Ecco come checkout.js finalmente guarda:
'usare rigoroso'; angular.module ('checkout', ['ngRoute']) .config (['$ routeProvider', funzione ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', controller:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', function ($ scope) ]);Includi un riferimento a checkout.js nel main.html file.
Inietti il modulo check-out nel app.js In modo che la carrello della spesa L'applicazione AngularJS è a conoscenza di questo modulo.
angular.module ('shoppingCart', ['ngRoute', 'carrello', 'checkout'])).Salva le modifiche e riavvia il server. Puntare il browser su http: // localhost: 3000 / # / checkout e si dovrebbe essere in grado di vedere la pagina di checkout.
In questo tutorial, abbiamo progettato e integrato il nostro semplice design del carrello degli acquisti in un'applicazione AngularJS. Nella parte successiva di questa serie, vedremo come creare una direttiva personalizzata per implementare la funzionalità richiesta.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri, correzioni e suggerimenti nella casella dei commenti qui sotto!
