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.
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.
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:
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:
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"]
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.
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););
Å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.
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!