Share
Nella parte precedente di questa serie di tutorial, abbiamo implementato il modificare e Elimina postare funzionalità nella pagina di benvenuto. In questa parte del tutorial, aggiungeremo un indicatore di caricamento Ladda nella nostra applicazione. Aggiungere un indicatore di caricamento è essenziale in quanto rende l'applicazione più interattiva. Sistemeremo anche un paio di problemi minori man mano che il tutorial avanza.
Iniziamo clonando la parte precedente del tutorial da GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part6.git
Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularJS_Firebase_Part6 installazione npm
Una volta installate le dipendenze, avviare il server.
inizio di npm
Puntare il browser su http: // localhost: 8000 / app / # / home e si dovrebbe avere l'applicazione in esecuzione.
Ladda è un concetto di interfaccia utente che unisce un indicatore di caricamento in pulsanti, rendendolo interattivo e di facile utilizzo. Dal sito ufficiale di Ladda,
Un concetto di interfaccia utente che unisce gli indicatori di caricamento nell'azione che li ha invocati. Principalmente inteso per l'uso con moduli in cui fornisce agli utenti un feedback immediato su submit piuttosto che lasciarli a chiedersi mentre il browser fa il suo dovere.
Per utilizzare Ladda nella nostra applicazione, creeremo una direttiva AngularJS per l'indicatore di caricamento Ladda. Le direttive sono una delle caratteristiche principali di AngularJS e controllano il rendering di HTML all'interno dell'applicazione.
Aprire app / home / home.js e creare una semplice direttiva come mostrato di seguito:
Accentsconagua
.direttiva ('laddaLoading', [function () return link: function (scope, element, attrs) ;]);Inizieremo e arresteremo l'indicatore di caricamento Ladda basato su a $ portata variabile chiamata login.loading. quando login.loading è vero, mostreremo l'indicatore di caricamento e quando sarà falso interromperà l'indicatore di caricamento. Quindi, in HomeCtrl, definire una variabile chiamata accesso e assegnarlo al $ scope.login variabile.
var login = ; $ scope.login = login;
Successivamente includi i file CSS e JavaScript da ladda dist in home / home.html come mostrato di seguito:
Dopo aver aggiunto lo script e i riferimenti di stile sopra, modificare il file Registrati pulsante in home.html come mostrato:
Come puoi vedere nel codice sopra, abbiamo aggiunto la direttiva laddaLoading al pulsante e sono passati login.loading. Imposteremo e ripristineremo il passato login.loading per cambiare il display dell'indicatore di caricamento. Abbiamo anche aggiunto alcuni stili, Segoe-ui-light e Ladda-button, per modellare gli indicatori di caricamento Ladda.
Ora dentro la direttiva collegamento funzione, aggiungere il seguente codice per mantenere un orologio sul login.loading scope variabile e avvia e ferma l'indicatore di conseguenza.
.direttiva ('laddaLoading', [function () return link: function (scope, elemento, attrs) var Ladda = window.Ladda; var ladda = Ladda.create (elemento [0]); // Controllo login.loading per modificare l'ambito. $ watch (attrs.laddaLoading, function (newVal, oldVal) // In base al valore start e stop dell'indicatore if (newVal) ladda.start (); else ladda.stop (); );;]);Successivamente, quando l'utente fa clic su Registrati pulsante abbiamo bisogno di impostare l'indicatore di caricamento. Quindi, in HomeCtrl dentro il Registrati funzione, impostare login.loading a vero per avviare l'indicatore di caricamento.
login.loading = true;
Allo stesso modo quando l'accesso successo o fallimento chiamata viene chiamato, abbiamo bisogno di impostare il login.loading false per interrompere l'indicatore di caricamento.
login.loading = false;
Salva tutte le modifiche e riavvia il server. Inserisci un indirizzo email e una password validi e dovresti essere in grado di vedere l'indicatore di caricamento in azione.
Allo stesso modo, possiamo aggiungere il Ladda indicatore di caricamento per il pulsante Registrati in registro / register.html. Includere i riferimenti richiesti in registro / register.html come mostrato:
Modifica il Registrare pulsante per includere la direttiva come mostrato:
Dentro il RegisterCtrl Aggiungi il accesso variabile per impostare e ripristinare l'indicatore di caricamento Ladda.
var login = ; $ Scope.login = login;
Ora, per abilitare l'indicatore di caricamento quando l'utente fa clic su Registrare pulsante, aggiungi il seguente codice al Iscriviti funzione.
login.loading = true;
Per disabilitare l'indicatore di caricamento, attivo successo o fallimento callback aggiungere il seguente codice.
login.loading = false;
Salva tutte le modifiche e prova a registrare un nuovo account. Facendo clic su Registrare pulsante dovresti essere in grado di vedere l'indicatore di caricamento.
Allo stesso modo, possiamo aggiungere l'indicatore di caricamento al Aggiungi post pagina anche. È esattamente lo stesso, quindi non lo ripeterò più. Se rimani bloccato, dai un'occhiata al codice sorgente alla fine di questo tutorial.
A questo punto, qualsiasi utente loggato può aggiungere, modificare ed eliminare tutti i post nell'applicazione. Ma non è giusto permettere a un utente di modificare il post di un altro utente. Quindi filtreremo i post visualizzati nella pagina di benvenuto e mostreremo solo i post creati da un particolare utente.
Per interrogare un dato da Firebase possiamo usare l'API startAt e endAt. utilizzando iniziare a e ENDAT possiamo recuperare i risultati con il punto iniziale e il punto finale specificati. Ma i dati con cui vorremmo passare iniziare a dovrebbe essere una priorità. Pertanto, per prima cosa dovremo impostare l'indirizzo email come priorità mentre trasferiamo i dati su Firebase.
Quindi, apri addPost / addPost.js e dare un'occhiata alla parte in cui trasferiamo i dati a Firebase.
fb. $ push (title: title, post: post, emailId: CommonProp.getUser ()). then (function (ref) console.log (ref); $ location.path ('/ welcome'); , function (error) console.log ("Errore:", errore););Modificare il codice sopra per impostare l'indirizzo e-mail come priorità mentre si spingono i dati.
var user = CommonProp.getUser (); fb. $ push (title: title, post: post, emailId: user, '.priority': user). then (function (ref) console.log (ref); $ location.path ('/ welcome' );, funzione (errore) console.log ("Errore:", errore););Quindi ora se aggiungiamo un post nella nostra applicazione viene aggiunto con una priorità per l'indirizzo email. Quindi, apri Welcome / welcome.js e dare un'occhiata alla porzione in cui stiamo creando il $ Firebase oggetto in WelcomeCtrl.
var sync = $ firebase (firebaseObj);
Modificare il codice sopra aggiungendo il iniziare a e ENDAT metodi per firebaseObj.
var sync = $ firebase (firebaseObj.startAt ($ scope.username) .endAt ($ scope.username));
Ora, restituirà solo i post aggiunti da un particolare utente connesso.
Salvare le modifiche precedenti e riavviare il server. Rimuovi tutti i vecchi post da Firebase. Ora prova ad aggiungere post dopo aver effettuato l'accesso con un indirizzo email e una password validi. Dopo aver creato alcuni post, prova ad accedere come un altro utente e non sarai in grado di visualizzare i post creati dall'utente precedente.
In questo tutorial, abbiamo visto come aggiungere l'indicatore di caricamento Ladda nella nostra applicazione per rendere la nostra app più interattiva. Abbiamo anche visto come filtrare il risultato dei dati durante il recupero dei dati da Firebase. Nella parte successiva di questa serie, implementeremo la funzionalità di disconnessione e correggeremo anche un paio di problemi esistenti.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri, correzioni e suggerimenti nei commenti qui sotto!
