Opprette en webapp fra grunnen ved hjelp av AngularJS og Firebase Del 5

I den forrige delen av serien designet og implementert vi et grensesnitt for å lage et blogginnlegg med tittel og innlegg. I denne delen ser vi hvordan du henter blogginnleggene som er lagret i Firebase, og gjør dem på vår velkomstside.

Starter

La oss begynne med å klone den forrige delen av opplæringen fra GitHub.

git klon https://github.com/jay3dec/AngularJS_Firebase_Part4.git

Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd AngularJS_Firebase_Part4 npm installere

Når avhengighetene er installert, start serveren

npm start

Pek nettleseren din til http: // localhost: 8000 / app / # / home, og du bør ha programmet kjørt.

Strukturering av data i brannbase

Tidligere da vi satte inn data i Firebase, presset vi bare dataene til Firebase-nettadressen, og det ble oppført tilfeldig i Firebase. Men når dataene vokser og alt blir presset til Firebase blir det vanskelig å vedlikeholde dataene. Så vi prøver å organisere våre data, noe som vil gjøre spørringen fra Firebase enklere.

Logg inn i Firebase og gå til Administrer app. Du bør se Firebase-nettadressen på instrumentbrettskjermen som vist nedenfor:

Klikk på plussymbolet ved siden av nettadressen og opprett en undernode som heter artikler med en verdi 0 og klikk Legg til. Når en subnode er lagt til, bør du ha noe som:

Som du kan se, har vi kategorisert artikler data separat, slik at det blir enkelt å spørre og hente data. 

Nå, naviger til addPost.js og endre Firebase URL til https://blistering-heat-2473.firebaseio.com/Articles. La oss også legge til e-post-IDen til brukeren som er relatert til blogginnlegget. Vi kan få e-post-IDen fra CommonProp tjeneste som vi skrev tidligere. Bare injiser CommonProp service i AddPostCtrl kontrolleren.

.controller ('AddPostCtrl', ['$ scope', '$ firebase', 'CommonProp', funksjon ($ scope, $ firebase, CommonProp) 

Mens du trykker på data, inkluderer du også e-post-ID-parameteren. Her er den endrede AddPost funksjon:

$ scope.AddPost = function () var title = $ scope.article.title; var post = $ scope.article.post; var firebaseObj = ny Firebase ("https://blistering-heat-2473.firebaseio.com/Articles"); var fb = $ ildbase (firebaseObj); fb. $ push (tittel: tittel, post: post, emailId: CommonProp.getUser ()) deretter (funksjon (ref) console.log (ref);, funksjon (feil) console.log Feil: ", feil);); 

Lagre alle endringene og start serveren på nytt. Prøv å logge på med en gyldig e-postadresse og et passord, og opprett et blogginnlegg. Nå, hvis du ser på Firebase-dashbordet, bør du se postdetaljer i artikler sub node som vist:

Render innlegg på velkomstsiden

Deretter la vi legge til en komponent for Bootstrap-listegruppen for å vise innlegg laget av en bruker. Navigere til app / velkommen / velkommen.html og inne i div med klassen container, etter velkomstmeldingen legger du til listegruppekomponenten som vist:

Tittel overskrift

Innlegg for blogginnlegg

Lagre endringene og start serveren på nytt. Prøv å logge inn med en gyldig e-postadresse og passord. Når på velkomstsiden ser du noe som:

Søker data fra brannbase

Neste, la oss spørre data fra Firebase ved hjelp av URL-adressen https://blistering-heat-2473.firebaseio.com/Articles. 

Åpen welcome.js, og inne i WelcomeCtrl kontrolleren oppretter et Firebase-objekt ved hjelp av den ovennevnte nettadressen.

var firebaseObj = ny Firebase ("https://blistering-heat-2473.firebaseio.com/Articles");

Vi skal bruke $ Fire for å få data fra Firebase. I henhold til de offisielle dokumentene:

De $ Fire Innpakning brukes til å synkronisere brannbase data med Angular apps. Den inneholder noen hjelpemetoder for å skrive data til Firebase, samt verktøy for å lese data i synkroniserte samlinger eller objekter.
var sync = $ firebase (firebaseObj);

For å få data fra Firebase URL som en synkronisert matrise, AngularFire gir en metode som kalles $ asArray. La oss ringe $ asArray metode på synkroniseringsobjekt og tilordne den til en annen $ omfang variabel. 

$ scope.articles = synk. $ asArray ();

Legg også til et avsnitt på velkomstsiden som vist:

artikler

Lagre alle endringene og start serveren på nytt. Logg inn med en gyldig e-postadresse og passord. En gang på velkomstsiden, bør du få spørresultatet som JSON-data i $ scope.articles bindende element.

["emailId": "[email protected]", "post": "Dette er mitt første innlegg på denne plattformen.", "title": "Hello !!" , "emailId": "[email protected]", "post": "God natt for i kveld", "tittel": "GoodBye"]

Binde spørresultatet ved hjelp av AngularJS

Siden vi har dataene forespurt fra Firebase i $ scope.articles variabel, kan vi binde dataene til vårt velkomstsiden listelement. Vi bruker AngularJS-direktivet ngRepeat for å gjenta dataene over Bootstrap listegruppen. Her er listegruppen HTML: 

Tittel overskrift

Innlegg for blogginnlegg

Legg til ngRepeat Direktivet som vist til hoved div.

ng-repeat = "artikkel i artikler"

De ngRepeat Direktivet iterates over artiklene variabel og skaper HTML inne i listegruppen div for hvert element. Så, endre HTML-koden som vises:

Article.title

Article.post

Lagre endringene og start serveren på nytt. Logg inn med en e-postadresse og et passord, og en gang på velkomstsiden bør du se listen over artikler lagt til fra siden Legg til innlegg.

Gå nå til http: // localhost: 8000 / app / # / addPost og legg til et annet innlegg. Siden vi ennå ikke har lagt til en omdirigering til velkomstsiden etter å ha opprettet et innlegg, navigerer du manuelt til http: // localhost: 8000 / app / # / welcome og du bør se det på listen.

Å fikse et par mindre problemer 

Omdirigere etter å ha opprettet et innlegg

Når posten er lagt til, må vi omdirigere brukeren til velkomstsiden. Åpen app / addPost / addPost.js og injiser $ location i AddPostCtrl kontrolleren. På fb. $ presse suksess tilbakeringing, legg til omdirigering til Velkommen side.

fb. $ push (tittel: tittel, post: post, emailId: CommonProp.getUser ()) deretter (funksjon (ref) console.log (ref); $ location.path ('/ welcome'); , funksjon (feil) console.log ("Feil:", feil););

Koble velkomstsiden for å legge til innlegg

Åpne opp app / velkommen / velkommen.html og endre linken Legg til innlegg href å omdirigere til siden Legg til innlegg som vist:

Legg til innlegg

Lagre alle endringene og start serveren på nytt. Logg inn med en gyldig e-postadresse og et passord, og prøv å lage et innlegg, og du bør kunne se innlegget på velkomstsiden listen.

Konklusjon

I denne veiledningen så vi hvordan du spørre dataene som er lagret i Firebase ved hjelp av AngularFire. Vi opprettet et grensesnitt for å gjøre blogginnlegget opprettet av en bruker som en liste på velkomstsiden. Vi har også løst et par små problemer.

I neste del av serien tar vi dette til neste nivå ved å implementere noen flere funksjoner som redigering og sletting av blogginnleggene.

Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker i kommentarene nedenfor!