Share
În partea anterioară a seriei, am proiectat și implementat o interfață pentru a crea o postare pe blog cu un titlu și o postare. În această parte, vom vedea cum să preluăm mesajele de blog salvate în Firebase și să le afișăm pe pagina noastră de întâmpinare.
Să începem prin clonarea părții anterioare a tutorialului de la GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part4.git
După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularJS_Firebase_Part4 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.
Mai devreme când am introdus datele în Firebase, pur și simplu am împins datele la adresa URL Firebase și a fost listată aleator în Firebase. Dar când datele cresc și totul este împins la Firebase devine dificilă menținerea datelor. Așadar, vom încerca să ne organizăm datele, ceea ce va facilita interogarea din Firebase.
Conectați-vă la Firebase și mergeți la Gestionați aplicația. Ar trebui să vedeți URL-ul Firebase pe ecranul tabloului de bord așa cum se arată mai jos:
Faceți clic pe pictograma plus de lângă adresa URL și creați un sub nod numit Articole cu o valoare 0 și faceți clic pe Adăuga. Odată ce un sub nod este adăugat, ar trebui să aveți ceva de genul:
După cum puteți vedea, am clasificat Articole date separat, astfel încât să fie ușor să interogați și să preluați date.
Acum, navigați la addPost.js și modificați URL-ul Firebase la https://blistering-heat-2473.firebaseio.com/Articles. Să adăugăm, de asemenea, ID-ul de e-mail al utilizatorului legat de postarea pe blog. Putem obține ID-ul de e-mail de la CommonProp serviciul pe care l-am scris mai devreme. Pur și simplu injectați CommonProp serviciu în AddPostCtrl controlor.
Accentsconagua
.controler ("AddPostCtrl", ['$ scope', '$ firebase', 'CommonProp', functie ($ scope, $ firebase, CommonProp) În timp ce împingeți datele, includeți și parametrul ID de e-mail. Aici este modificat AddPost funcţie:
$ scope.AddPost = funcția () var title = $ scope.article.title; var post = $ scope.article.post; var firebaseObj = noua Firebase ("https://blistering-heat-2473.firebaseio.com/Articles"); var fb = $ firebase (firebaseObj); (funcția (ref) console.log (ref);, funcția (eroare) console.log (" Eroare: ", eroare);); Salvați toate modificările și reporniți serverul. Încercați să vă conectați utilizând o adresă de e-mail și o parolă valabilă și să creați un post pe blog. Acum, dacă aveți o privire la tabloul de bord Firebase, ar trebui să vedeți detaliile postului în Articole sub nod așa cum este arătat:
Apoi, să adăugăm o componentă a grupului listei Bootstrap pentru a afișa postările create de un utilizator. Navigheaza catre app / de bun venit / welcome.html și în interiorul div cu clasa recipient, după mesajul de întâmpinare, adăugați componenta grupului de listă după cum se arată:
Titlu Rubrică
Postarea conținutului blogului
Salvați modificările și reporniți serverul. Încercați să vă conectați cu o adresă de e-mail și o parolă valide. Când vă aflați pe pagina de întâmpinare, ar trebui să vedeți ceva de genul:
Apoi, permiteți interogarea datelor din Firebase utilizând adresa URL https://blistering-heat-2473.firebaseio.com/Articles.
Deschis welcome.js, și în interior WelcomeCtrl controlerul creează un obiect Firebase utilizând adresa URL de mai sus.
var firebaseObj = noua Firebase ("https://blistering-heat-2473.firebaseio.com/Articles");Vom folosi $ firebase pentru a obține date de la Firebase. Potrivit documentelor oficiale:
$ firebase wrapper este utilizat pentru sincronizarea datelor Firebase cu aplicațiile Angular. Acesta conține câteva metode de ajutor pentru scrierea datelor în Firebase, precum și instrumente pentru citirea datelor în colecții sau obiecte sincronizate.var sincronizare = $ firebase (firebaseObj);
Pentru a obține date de la adresa Firebase URL ca o matrice sincronizată, AngularFire oferă o metodă numită $ asArray. Să sunăm $ asArray pe obiectul de sincronizare și alocați-l altui domeniul de aplicare $ variabil.
$ scope.articles = sincronizare $ asArray ();
Adăugați, de asemenea, un element de paragraf pe pagina de întâmpinare, după cum se arată:
articole
Salvați toate modificările și reporniți serverul. Conectați-vă cu o adresă de e-mail și o parolă valide. Odată ce ați intrat pe pagina de întâmpinare, ar trebui să aveți rezultatul interogării ca date JSON în $ scope.articles element obligatoriu.
["emailId": "[email protected]", "post": "Acesta este primul meu post pe această platformă", "title": "Hello !!" , "emailId": "[email protected]", "post": "Noapte bună pentru seara asta", "titlu": "GoodBye"]
Deoarece avem datele cerute de Firebase în $ scope.articles , putem lega datele în elementul listei de pagini de bun venit. Vom folosi directiva AngularJS ngRepeat pentru a repeta datele din grupul listei Bootstrap. Iată grupul HTML al listei:
Titlu Rubrică
Postarea conținutului blogului
Adaugă ngRepeat directivă, după cum se arată în capitolul div.
ng-repeat = "articol în articole"
ngRepeat directiva iterează peste variabila articolelor și creează codul HTML în interiorul grupului div div pentru fiecare element. Deci, modificați codul HTML afișat:
titlul articolului
Article.post
Salvați modificările și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă, iar o dată pe pagina de întâmpinare ar trebui să vedeți lista de articole adăugate din pagina Adăugați postare.
Acum, navigați la http: // localhost: 8000 / app / # / addPost și adăugați o altă postare. Deoarece nu am adăugat încă o redirecționare la pagina de întâmpinare după ce ați creat o postare, navigați manual la adresa http: // localhost: 8000 / app / # / welcome și ar trebui să o vedeți în listă.
Odată ce postul a fost adăugat, trebuie să redirecționăm utilizatorul la pagina de întâmpinare. Deschis app / addPost / addPost.js și injectați $ locație în AddPostCtrl controlor. Pe fb. $ împinge reușită, adăugați o redirecționare la Bine ati venit pagină.
fb, $ push (title: title, post: post, emailId: CommonProp.getUser ()), apoi function (ref) console.log (ref) , funcția (eroare) console.log ("Eroare:", eroare););Deschide app / de bun venit / welcome.html și modificați linkul Adăugați postare href pentru a redirecționa la pagina Adăugați postare după cum se arată:
Adăugați postarea
Salvați toate modificările și reporniți serverul. Conectați-vă cu o adresă de e-mail și o parolă valabilă și încercați să creați o postare și ar trebui să puteți vedea postarea pe lista de pagini de bun venit.
În acest tutorial, am văzut cum să interogăm datele stocate în Firebase utilizând AngularFire. Am creat o interfață pentru a reda postarea pe blog creată de un utilizator ca listă pe pagina de bun venit. Am rezolvat și câteva probleme mici.
În următoarea parte a seriei, vom duce acest lucru la nivelul următor prin implementarea câtorva alte caracteristici, cum ar fi editarea și ștergerea postărilor din blog.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile dvs. în comentariile de mai jos!
