Creare un carrello semplice utilizzando AngularJS parte 2

Nella parte precedente di questa serie di tutorial, abbiamo visto come iniziare a creare un semplice carrello acquisti utilizzando AngularJS. Abbiamo creato un design semplice ma AngularJS non era abbastanza per chiamarlo un'applicazione AngularJS. In questa parte della serie di tutorial, creeremo una direttiva AngularJS personalizzata per implementare la funzionalità richiesta.

Iniziare

Iniziamo clonando il codice sorgente del precedente tutorial di GitHub.

git clone https://github.com/jay3dec/AngularShoppingCart_Part1.git

Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.

cd AngularShoppingCart_Part1 npm install

Una volta installate le dipendenze, avviare il server.

nodo server.js

Puntare il browser su http: // localhost: 3000 / e si dovrebbe avere l'applicazione in esecuzione.

Creazione di una direttiva Elenco di controllo

Nel cart.html pagina, gli oggetti e le sue opzioni vengono ripetuti. Quindi creeremo una direttiva AngularJS per questo scopo che creerà gli articoli e le relative opzioni in base ai dati nel back-end. Per semplicità, prendiamo in considerazione i seguenti articoli nel carrello:

['item': 'Disco rigido', 'id': 'HD', 'selezionato': 0, 'prezzi': ['size': '200GB', 'price': '2000', ' size ':' 400GB ',' price ':' 4000 '], ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prices ': [' size ' : "i3", "prezzo": "20000", "dimensione": "i5", "prezzo": "25000"], "articolo": "Monitor", "id": "MON" , 'selected': 0, 'prices': ['size': '16 \ ", 'price': '3000', 'size': '19 \", 'price': '5000'] , 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': '350',  'size': 'Avanzate', 'prezzo': '550'], 'elemento': 'RAM', 'id': 'RM', 'selezionato': 0, 'prezzi': ['size ':' 4GB ',' prezzo ':' 4000 ', ' dimensione ':' 8GB ',' prezzo ':' 8000 '], ' elemento ':' Tastiera USB ',' id ':' KEY ',' selected ': 0,' prices ': [' size ':' Standard ',' price ':' 2500 ', ' size ':' Advanced ',' price ':' 4500 '] ]

Aggiungi i seguenti dati all'interno del CartCtrl.

$ scope.shopData = ['item': 'Disco rigido', 'id': 'HD', 'selezionato': 0, 'prezzi': ['size': '200 GB', 'prezzo': '2000 ', ' size ':' 400GB ',' prezzo ':' 4000 '], ' elemento ':' CPU ',' id ':' CPU ',' selezionato ': 0,' prezzi ': ['size': 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Monitor', 'id ':' MON ',' selected ': 0,' prices ': [' size ': '16 \ ",' price ':' 3000 ', ' size ': '19 \",' price ': '5000'], 'elemento': 'Mouse ottico', 'id': 'MOU', 'selezionato': 0, 'prezzi': ['size': 'Optical', 'price': ' 350 ', ' size ':' Avanzate ',' prezzo ':' 550 '], ' elemento ':' RAM ',' id ':' RM ',' selezionato ': 0,' prezzi ' : ['size': '4GB', 'price': '4000', 'size': '8GB', 'price': '8000'], 'item': 'USB Keyboard', 'id': 'KEY', 'selected': 0, 'prices': ['size': 'Standard', 'price': '2500', 'size': 'Advanced', 'price': '4500']];

Rimuovi il ripetuto .pannello Codice HTML da cart.html. Creeremo l'HTML in modo dinamico usando ngRepeat e $ scope.shopData. Aggiungi il seguente codice HTML alla prima colonna di .riga div. 

 
 
 
 Q.item
 
 
 

Come visto nel codice sopra, usando ngRepeat abbiamo ripetuto l'iterazione shopData e reso l'HTML. Salvare le modifiche precedenti e riavviare il server. Aggiorna la pagina e dovresti essere in grado di visualizzare gli elementi visualizzati sulla pagina.

Successivamente, mostreremo l'opzione disponibile insieme a un particolare oggetto, come le sue dimensioni e il prezzo (fai riferimento ai dati JSON). A tale scopo creeremo la nostra direttiva AngularJS personalizzata. Le direttive AngularJS sono una delle funzionalità più potenti di AngularJS. Per informazioni dettagliate sulle direttive AngularJS, fare riferimento ai documenti ufficiali.

Creiamo una direttiva personalizzata chiamata Lista di controllo. Aperto cart.js e creare una nuova direttiva come mostrato:

.direttiva ('checkList', function () return restrict: 'E', template: function (elem, attrs) return '
\ 
\ Opzione 1\ 
\ 
\ Opzione 2\ 
\ 
\ Opzione 2\ 
\ 
'; )

Questa direttiva ha il nome Lista di controllo. La direttiva Lista di controllo ha due parametri, limitare  e modello. Limitare definisce come verrà chiamata la direttiva. Dato che abbiamo definito E, sarà chiamato come nome di un elemento, come:

Il modello campo definito il codice HTML che sostituirà il Lista di controllo direttiva sulla pagina. Abbiamo usato lo stesso codice HTML statico che avevamo prima. Ora chiama la direttiva Lista di controllo sul cart.html pagina.

 
 
 Q.item
 
  

Salvare le modifiche precedenti e aggiornare la pagina del carrello. Dovresti essere in grado di visualizzare le opzioni HTML statiche sulla pagina del carrello.

Ora, facciamo in modo che la direttiva legga i dati $ scope.shopData. In primo luogo, anziché ripetere le opzioni all'interno della direttiva, useremo ngRepeat per iterare le opzioni. Modifica la direttiva Lista di controllo come mostrato per renderlo dinamico.

template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Come puoi vedere nel codice sopra, ci aspettiamo il opzione da passare alla direttiva. Quindi dalla porzione HTML dovremo definire un attributo per il Lista di controllo direttiva chiamata opzione e passare i dati richiesti. Aggiungi il opzione nel cart.html come mostrato:

 
 
 Q.item
 
  

Per accedere al passato opzione all'interno della direttiva dovremo definire l'ambito. Dentro il Lista di controllo direttiva definire scopo come mostrato:

.direttiva ('checkList', function () return restrict: 'E', scope: opzione: '=', template: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'; )

In questo modo il listino prezzi di diversi articoli da $ scope.shopData è passato nella direttiva. Salvare le modifiche precedenti e riavviare il server. Aggiorna la pagina e dovresti essere in grado di visualizzare le dimensioni e il prezzo di ciascun articolo come opzioni nella pagina.

Ora, se si tenta di fare clic sull'opzione del pulsante di opzione per un particolare elemento, entrambi vengono selezionati. Per garantire che un elemento sia selezionato alla volta, raggrupperemo i pulsanti di opzione. Per questo ci sarà richiesto di passarne un altro nome attributo alla direttiva dalla vista HTML. Quindi aggiungi un nuovo nome attribuire a check-list dalla vista Passeremo l'articolo ID come il nome, dato che è unico per ogni oggetto.

Ora aggiungi un'altra variabile all'ambito della direttiva per renderla accessibile nel modello di direttiva.

scope: option: '=', name: '='

All'interno della direttiva modello HTML, aggiungi il nome passato come nome del pulsante di opzione che raggruppa i pulsanti di opzione di determinati elementi.

Salva le modifiche e aggiorna la pagina. Prova a selezionare i pulsanti di opzione per un determinato elemento e dovresti essere in grado di selezionarne solo uno alla volta.
Calcolo del totale in base alle opzioni selezionate
In base agli elementi selezionati dall'utente, dobbiamo mostrare una somma totale del prezzo di tutti gli articoli selezionati. Per questo creeremo un $ portata funzione chiamata totale, che riassumerà il prezzo totale. Ogni volta che un utente seleziona un elemento, aggiorniamo la variabile selezionata nel $ scope.shopData JSON. Quindi questo JSON viene iterato per ottenere il prezzo totale degli articoli selezionati. Ecco il totale funzione.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  return t; 
In questo momento stiamo mostrando un valore hard-coded di Rs 100 nel div totale. Invece di ciò chiameremo semplicemente la funzione totale.
Rs. totale()
Salva le modifiche e aggiorna la pagina. Se provi a selezionare le diverse opzioni, il totale non cambia davvero. È perché il valore iniziale del selezionato variabile nel JSON è 0 e non viene aggiornata alla selezione. Passiamo quindi il valore selezionato da JSON alla direttiva e aggiorniamolo quando viene selezionato il pulsante di opzione. Modifica la vista HTML per includerne un'altra selezionato attributo al Lista di controllo elemento direttivo. 
Inserisci selezionato alla portata della direttiva per accedervi all'interno della direttiva.
ambito: opzione: '=', nome: '=', selezionato: '= selezionato'
Imposteremo selezionato al pulsante radio ngModel direttiva e il i.price al ngValue direttiva. Quindi, ogni volta che viene selezionato il pulsante di opzione, il suo valore viene aggiornato in selezionato attributo del $ scope.shopData JSON. 
Salvare le modifiche precedenti e aggiornare la pagina. Prova a selezionare le opzioni del pulsante di opzione e in base alla selezione Totale il prezzo dovrebbe essere aggiornato.
Conclusione
In questa parte della serie di tutorial, abbiamo creato una direttiva personalizzata e l'abbiamo utilizzata nella nostra semplice applicazione del carrello degli acquisti. Nella prossima parte di questa serie, vedremo come rendere il div totale sempre fisso in alto mentre si scorre verso il basso. Implementeremo anche la pagina di checkout in cui gli articoli e i prezzi selezionati verranno mostrati con un pulsante alla pagina del carrello per personalizzare la selezione.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri o eventuali correzioni nei commenti qui sotto!



		
			
	   
	




Codice