Share
Nella parte precedente di questa serie di tutorial, abbiamo creato una direttiva personalizzata e l'abbiamo utilizzata nella nostra semplice applicazione del carrello degli acquisti. In questa parte della serie di tutorial, vedremo come rendere il div totale in cima mentre si scorre il browser. Creeremo anche una pagina di checkout in cui verranno visualizzati tutti gli elementi selezionati dall'utente.
Iniziamo clonando la parte precedente del tutorial da GitHub.
git clone https://github.com/jay3dec/AngularShoppingCart_Part2.git
Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularShoppingCart_Part2 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.
Anche se stiamo usando il componente app di bootstrap per mantenere il div totale in alto, non funziona come previsto. Esaminiamo cosa sta andando male.
Il componente app di bootstrap aggiunge una classe chiamata apporre quando scorriamo sopra una certa altezza e apporre-top quando è sotto Funziona ancora nelle semplici pagine HTML, ma se integrato in AngularJS non sembra funzionare. Per risolvere questo problema, terremo un controllo sull'altezza dello scroll e quando è sopra e sotto una certa altezza, diciamo 50 px, aggiungeremo le classi affix di conseguenza.
Quindi, assumendo che abbiamo l'altezza di scorrimento come scorrere, Aggiungi il apporre e apporre-top classi al Totale div usando la direttiva ngClass.
ng-class = "'affix': scroll> 50, 'affix-top': scroll <= 50"
Per ottenere lo scroll creeremo un'altra direttiva. Diamo un nome alla direttiva getScroll. Questa direttiva aggiornerà il scorrere valore ogni volta che si scorre la finestra del browser e in base a scorrere le classi affix saranno aggiornate.
Accentsconagua
.direttiva ('getScroll', function ($ window) return scope: scroll: '= scroll', link: function (scope, element, attrs) var scrollwindow = angular.element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (scope, function () scope.scroll = scrollwindow.scrollTop ();));;)Come visto nel codice sopra, stiamo passando un attributo scroll al getScroll direttiva. In scroll stiamo calcolando l'altezza di scroll dall'alto usando angular.element ($ finestra). Ad ogni evento di scroll aggiorniamo il scorrere variabile di scope.
Aggiungi la direttiva sopra alla fine del cart.html pagina.
Salva queste modifiche e aggiorna la pagina. Prova a scorrere la finestra del browser e il totale dovrebbe essere affisso in alto, sempre visibile.
Per popolare la pagina di checkout con gli articoli selezionati, dovremo passare gli articoli tra i controller. Quindi utilizzeremo un servizio AngularJS per trasferire i dati tra i controller. Creiamo un servizio chiamato CommonProp dove salveremo gli articoli selezionati e anche il prezzo totale. Aprire cart.js e creare un servizio chiamato CommonProp come mostrato:
.service ('CommonProp', function () var Items = "; var Totale = 0; return getItems: function () return Items;, setItem: function (valore) Items = value;, getTotal: function ( ) return Total;, setTotal: function (value) Total = value;;);Come visto, dentro CommonProp servizio abbiamo definito quattro funzioni per ottenere e impostare gli articoli e il prezzo totale. Inietti il CommonProp servizio nel CartCtrl.
.controller ('CartCtrl', ['$ scope', 'CommonProp', funzione ($ scope, CommonProp) Guarderemo per qualsiasi cambiamento nel shopData variabile e aggiornare i dati del servizio di conseguenza. Aggiungi il seguente codice all'interno CartCtrl.
$ scope. $ watch ('shopData', function () CommonProp.setItem ($ scope.shopData);)Dentro checkout.js, iniettare il CommonProp servizio in CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', funzione ($ scope, CommonProp) Useremo il CommonProp servizio per ottenere gli articoli e il totale in CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);utilizzando $ scope.items compileremo la pagina di pagamento. Aprire checkout.html e rimuovi la tabella codificata esistente. Useremo la direttiva ngRepeat e $ scope.items per creare la tabella e popolarla in modo dinamico.
| I.item | Rs. Ho selezionato |
Salvare le modifiche precedenti e aggiornare la pagina. Selezionare alcuni elementi e quindi fare clic su Check-out pulsante nella pagina del carrello. Una volta sulla pagina di checkout, dovrebbe visualizzare l'elenco degli elementi selezionati.
Includiamo anche il totale del prezzo nella pagina di pagamento. Quindi quando il totale è calcolato nella funzione totale in CartCtrl, aggiorna il CommonProp servizio valore totale.
$ scope.total = function () var t = 0; for (var k in $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); ritorno t;
Per visualizzare il totale nella pagina di pagamento, includere quanto segue TR Codice HTML:
Totale: Rs. totale
Dal momento che stiamo aggiornando il totale variabile di scope in CheckoutCtrl, il totale verrà automaticamente visualizzato. Salva le modifiche e ricomincia da capo. Seleziona alcuni articoli e seleziona Cassa. Una volta sulla pagina di checkout dovresti essere in grado di vedere gli articoli selezionati e il prezzo totale.
Una volta sulla pagina di pagamento, se si fa clic sul personalizzare pulsante verrai reindirizzato alla pagina del carrello, ma tutte le selezioni saranno perse. Quindi dobbiamo aggiustarlo. Una volta caricata la pagina del carrello, controlleremo il CommonProp servizio per eventuali articoli esistenti. Se sono presenti elementi, utilizzeremo tali elementi per popolare la pagina del carrello.
Dentro CartCtrl controlla se qualche elemento esiste in CommonProp e impostare il $ scope.shopData.
if (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Salvare tutte le modifiche precedenti e riavviare il server. Dalla pagina del carrello, selezionare alcuni elementi e quindi fare clic su Check-out per navigare fino alla pagina di pagamento. Una volta nella pagina di pagamento, fai clic su personalizzare pulsante per tornare alla pagina del carrello. E dovresti avere tutte le selezioni fatte, come sono, nella pagina del carrello.
In questa parte della serie di tutorial, abbiamo implementato la pagina di checkout e abbiamo visto come condividere i dati tra diversi controller utilizzando un servizio AngularJS. Abbiamo anche creato una direttiva per ottenere l'altezza di scorrimento e risolvere il problema del affisso bootstrap.
Spero che tu abbia imparato qualcosa da questa serie di tutorial. Per ulteriori informazioni approfondite riguardanti le direttive AngularJS, dare un'occhiata alla documentazione ufficiale.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri e correzioni nei commenti qui sotto!
