Share
În partea anterioară a acestei serii de tutori am implementat Editați | × și șterge post pe pagina de bun venit. În această parte a tutorialului, vom adăuga un indicator de încărcare Ladda în aplicația noastră. Adăugarea unui indicator de încărcare este foarte esențială, deoarece face aplicația mai interactivă. De asemenea, vom remedia câteva probleme minore pe măsură ce progresează tutorialul.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part6.git
După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularJS_Firebase_Part6 Instalare npm
După instalarea dependențelor, porniți serverul.
npm start
Punctați browser-ul la http: // localhost: 8000 / app / # / home și ar trebui să aveți aplicația să ruleze.
Ladda este un concept UI care îmbină un indicator de încărcare în butoane, făcându-l interactiv și ușor de utilizat. De pe site-ul oficial Ladda,
Un concept UI care îmbină indicatorii de încărcare cu acțiunea care le-a invocat. Destinată în primul rând pentru utilizarea cu formulare, în care oferă utilizatorilor feedback imediat după trimitere, mai degrabă decât lăsându-i să se întrebe în timp ce browserul își face lucrul.
Pentru a folosi Ladda în aplicația noastră, vom crea o directivă AngularJS pentru indicatorul de încărcare Ladda. Directivele reprezintă una dintre caracteristicile principale ale AngularJS și controlează randarea HTML în interiorul aplicației.
Deschide app / home / home.js și să creați o directivă simplă după cum se arată mai jos:
Accentsconagua
.directiva ('laddaLoading', [function () return link: function (scope, element, attrs) ;]);Vom începe și opri indicatorul de încărcare Ladda bazat pe a domeniul de aplicare $ variabilă numită login.loading. Cand login.loading este adevărat, vom arăta indicatorul de încărcare, iar când este fals, vom opri indicatorul de încărcare. Deci, în HomeCtrl, defini o variabilă numită Logare și alocați-l $ scope.login variabil.
var login = ; $ scope.login = login;
Apoi includeți fișierele CSS și JavaScript de la ladda dist in acasă / home.html așa cum se arată mai jos:
După adăugarea referințelor de script și de stil de mai sus, modificați Conectare buton în home.html așa cum se arată:
După cum puteți vedea în codul de mai sus, am adăugat directiva laddaLoading la buton și au trecut login.loading. Vom seta și vom reseta parcurgerea login.loading pentru a comuta afișajul indicatorului de încărcare. De asemenea, am adăugat anumite stiluri, Segoe-ui-light și ladda-buton, să modeleze indicatorii de încărcare Ladda.
Acum, în directivă legătură adăugați următorul cod pentru a păstra un ceas pe login.loading variabila de domeniu și porniți și opriți indicatorul în consecință.
.directiva ('laddaLoading', [function () return link: function (scope, element, attrs) var Ladda = window.Ladda; var ladda = Ladda.create (element [0] pentru a schimba domeniul $ watch (attrs.laddaLoading, function (newVal, oldVal) // Bazat pe valoarea de start si oprirea indicatorului daca (newVal) ladda.start (); altceva ladda.stop (); );;]);Apoi, când utilizatorul face clic pe Conectare butonul trebuie să setați indicatorul de încărcare. Deci, în HomeCtrl în interiorul Conectare funcție, setat login.loading la adevărat pentru a porni indicatorul de încărcare.
login.loading = true;
În mod similar, la conectare succes sau eșec sună callback, trebuie să setăm login.loading la fals pentru a opri indicatorul de încărcare.
login.loading = false;
Salvați toate modificările și reporniți serverul. Introduceți o adresă de e-mail și o parolă validă și ar trebui să puteți vedea indicatorul de încărcare în acțiune.
În mod similar, putem adăuga ladda indicator de încărcare pentru butonul Înregistrare în înregistrați / register.html. Includeți referințele necesare în înregistrați / register.html așa cum se arată:
Modificați Inregistreaza-te pentru a include directiva după cum se arată:
În interiorul RegisterCtrl adaugă Logare pentru a seta și a reseta indicatorul de încărcare Ladda.
var login = ; $ Scope.login = conectare;
Acum, pentru a activa indicatorul de încărcare când utilizatorul face clic pe Inregistreaza-te butonul, adăugați următorul cod la Inscrie-te funcţie.
login.loading = true;
Pentru a dezactiva indicatorul de încărcare, porniți succes sau eșec retur apel adăugați următorul cod.
login.loading = false;
Salvați toate modificările și încercați să vă înregistrați pentru un cont nou. Când faceți clic pe Inregistreaza-te buton, ar trebui să puteți vedea indicatorul de încărcare.
În mod similar, putem adăuga indicatorul de încărcare la Adăugați un post pagina de asemenea. Este exact același lucru, așa că nu o voi mai repeta. Dacă rămâneți blocat, aruncați o privire la codul sursă de la sfârșitul acestui tutorial.
În acest moment, orice utilizator conectat poate adăuga, edita și șterge toate postările din aplicație. Dar nu este corect să permiteți unui utilizator să modifice postarea altui utilizator. Deci, vom filtra postările afișate pe pagina de întâmpinare și vom afișa numai acele postări create de utilizatorul respectiv.
Pentru a interoga date de la Firebase, putem folosi API-ul startAt și endAt. Utilizarea incepe la și EnDat putem obține rezultate cu punctul de pornire și punct final specificat. Dar datele cu care trecem incepe la ar trebui să fie o prioritate. Deci, mai întâi va trebui să setăm adresa de e-mail ca o prioritate în timp ce împingem datele către Firebase.
Deci, deschide-te addPost / addPost.js și aruncăm o privire asupra porțiunii în care împingem datele către Firebase.
fb, $ push (title: title, post: post, emailId: CommonProp.getUser ()), apoi function (ref) console.log (ref) , funcția (eroare) console.log ("Eroare:", eroare););Modificați codul de mai sus pentru a seta adresa de e-mail ca o prioritate în timp ce împingeți datele.
var utilizator = CommonProp.getUser (); fb, $ push (titlu: titlu, post: post, emailId: user,'priority ': user). );, funcția (eroare) console.log ("Eroare:", eroare););Deci, dacă adăugăm o postare în aplicația noastră, este adăugată o prioritate pentru adresa de e-mail. Apoi, deschide-te Bine ai venit / welcome.js și aruncăm o privire la porțiunea în care creăm $ firebase obiect în WelcomeCtrl.
var sincronizare = $ firebase (firebaseObj);
Modificați codul de mai sus adăugând incepe la și EnDat metode pentru firebaseObj.
var sincc = $ firebase (firebaseObj.startAt ($ scope.username) .endAt ($ scope.username));
Acum, acesta va returna numai posturile adăugate de un anumit utilizator conectat.
Salvați modificările de mai sus și reporniți serverul. Eliminați toate postările vechi de la Firebase. Încercați acum să adăugați postări după conectarea cu o adresă de e-mail și o parolă valide. Odată ce au fost create câteva postări, încercați să vă conectați ca un alt utilizator și nu veți putea vedea posturile create de utilizatorul anterior.
În acest tutorial, am văzut cum să adăugăm indicatorul de încărcare Ladda în aplicația noastră pentru a face aplicația noastră mai interactivă. De asemenea, am văzut cum să filtrați rezultatul datelor în timp ce preluați date de la Firebase. În următoarea parte a acestei serii vom implementa funcționalitatea de deconectare și vom remedia și câteva probleme existente.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile, corecțiile și sugestiile din comentariile de mai jos!
