Share
In het vorige deel van de serie hebben we een interface ontworpen en geïmplementeerd om een blogpost met een titel en bericht te maken. In dit deel bekijken we hoe we de blogberichten die in Firebase zijn opgeslagen, kunnen ophalen en op onze welkomstpagina kunnen weergeven.
Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part4.git
Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularJS_Firebase_Part4 npm installeren
Zodra de afhankelijkheden zijn geïnstalleerd, start u de server
npm start
Wijs je browser naar http: // localhost: 8000 / app / # / home en je zou de applicatie moeten laten draaien.
Eerder toen we gegevens in Firebase hebben ingevoegd, hebben we de gegevens eenvoudig naar de Firebase-URL gepusht en deze werd willekeurig in Firebase weergegeven. Maar wanneer gegevens groeien en alles naar Firebase wordt gepusht, wordt het moeilijk om de gegevens te onderhouden. Dus we zullen proberen onze gegevens te ordenen, waardoor het zoeken vanuit Firebase eenvoudiger wordt.
Meld u aan bij Firebase en ga naar App beheren. U zou de Firebase-URL op het dashboardscherm moeten zien zoals hieronder getoond:
Klik op het plusteken naast de URL en maak een subknooppunt met de naam artikelen met een waarde 0 en klik Toevoegen. Zodra een subknooppunt is toegevoegd, zou u iets moeten hebben als:
Zoals je kunt zien, hebben we het gecategoriseerd artikelen gegevens afzonderlijk, zodat u gemakkelijk gegevens kunt opvragen en ophalen.
Ga nu naar addPost.js en wijzig de Firebase-URL in https://blistering-heat-2473.firebaseio.com/Articles. Laten we ook de e-mail-ID toevoegen van de gebruiker met betrekking tot de blogpost. We kunnen de e-ID van de CommonProp dienst die we eerder hebben geschreven. Injecteer gewoon de CommonProp service in de AddPostCtrl controleur.
Accentsconagua
.controller ('AddPostCtrl', ['$ scope', '$ firebase', 'CommonProp', functie ($ scope, $ firebase, CommonProp) Terwijl u de gegevens pusht, neemt u ook de parameter voor de e-mail-ID op. Dit is het aangepaste AddPost functie:
$ scope.AddPost = function () var title = $ scope.article.title; var post = $ scope.article.post; var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com/Articles"); var fb = $ firebase (firebaseObj); fb. $ push (title: title, post: post, emailId: CommonProp.getUser ()). then (function (ref) console.log (ref);, function (error) console.log (" Fout: ", fout);); Sla alle wijzigingen op en start de server opnieuw op. Probeer in te loggen met een geldig e-mailadres en wachtwoord en een blogpost te maken. Als u nu naar het Firebase-dashboard kijkt, ziet u de postdetails in de artikelen subknooppunt zoals getoond:
Laten we vervolgens een Bootstrap-lijstgroepcomponent toevoegen om berichten weer te geven die door een gebruiker zijn gemaakt. Navigeren naar app / welkom / welcome.html en binnen de div met klasse houder, na het welkomstbericht, voeg de lijstgroepcomponent toe zoals getoond:
Titel rubriek
Inhoud van blogpost
Sla de wijzigingen op en start de server opnieuw op. Probeer in te loggen met een geldig e-mailadres en wachtwoord. Wanneer u op de welkomstpagina bent, ziet u iets als:
Laten we vervolgens gegevens opvragen bij Firebase met de URL https://blistering-heat-2473.firebaseio.com/Articles.
Open welcome.js, en in de WelcomeCtrl controller maakt een Firebase-object met behulp van de bovenstaande URL.
var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com/Articles");We zullen gebruiken $ firebase om gegevens van Firebase te krijgen. Volgens de officiële documenten:
De $ firebase wrapper wordt gebruikt voor het synchroniseren van Firebase-gegevens met Angular-apps. Het bevat enkele hulpmethoden voor het schrijven van gegevens naar Firebase, evenals hulpprogramma's voor het lezen van gegevens in gesynchroniseerde verzamelingen of objecten.var sync = $ firebase (firebaseObj);
Om gegevens van de Firebase-URL als een gesynchroniseerde array te krijgen, biedt AngularFire een methode met de naam $ asArray. Laten we het $ asArray methode op sync-object en wijs het toe aan een ander $ scope veranderlijk.
$ scope.articles = sync. $ asArray ();
Voeg ook een alinea-element toe op de welkomstpagina zoals getoond:
Artikelen
Sla alle wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord. Eenmaal op de welkomstpagina zou u het query-resultaat als JSON-gegevens moeten hebben in de $ scope.articles bindend element.
["emailId": "[email protected]", "post": "Dit is mijn eerste bericht op dit platform.", "titel": "Hallo !!" , "emailId": "[email protected]", "post": "Goede nacht voor vanavond", "titel": "GoodBye"]
Omdat we de gegevens hebben ondervraagd van Firebase in de $ scope.articles variabele, we kunnen de gegevens binden aan ons welkomstpagina-lijstelement. We gebruiken de AngularJS-instructie ngRepeat om de gegevens in de Bootstrap-lijstgroep te herhalen. Hier is de HTML van de lijstgroep:
Titel rubriek
Inhoud van blogpost
Voeg de toe ngRepeat richtlijn zoals getoond aan de hoofd-div.
ng-repeat = "artikel in artikelen"
De ngRepeat De instructie itereert over de artikelvariabele en maakt de HTML in de lijstgroep-div voor elk item. Dus, wijzig de weergegeven HTML-code:
artikel titel
Article.post
Sla de wijzigingen op en start de server opnieuw op. Meld u aan met een e-mailadres en wachtwoord en eenmaal op de welkomstpagina ziet u de lijst met artikelen die zijn toegevoegd op de pagina Bericht toevoegen.
Ga nu naar http: // localhost: 8000 / app / # / addPost en voeg een ander bericht toe. Aangezien we nog geen omleiding hebben toegevoegd aan de welkomstpagina na het maken van een bericht, navigeer je handmatig naar http: // localhost: 8000 / app / # / welcome en je zou het in de lijst moeten zien.
Zodra het bericht is toegevoegd, moeten we de gebruiker doorverwijzen naar de welkomstpagina. Open app / addPost / addPost.js en injecteer $ locatie in de AddPostCtrl controller. Op fb. $ push succes callback, voeg een omleiding toe aan de Welkom pagina.
fb. $ push (title: title, post: post, emailId: CommonProp.getUser ()). then (function (ref) console.log (ref); $ location.path ('/ welcome'); , functie (fout) console.log ("Fout:", fout););Doe open app / welkom / welcome.html en wijzig de link Post toevoegen href om door te verwijzen naar de pagina Bericht toevoegen zoals getoond:
Voeg bericht toe
Sla alle wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord en probeer een bericht te maken, en u zou het bericht op de welkomstpaginalijst moeten kunnen bekijken.
In deze zelfstudie hebben we gezien hoe de gegevens die in Firebase zijn opgeslagen, kunnen worden opgevraagd met AngularFire. We hebben een interface gemaakt om het blogbericht gemaakt door een gebruiker als een lijst op de welkomstpagina weer te geven. We hebben ook een paar kleine problemen opgelost.
In het volgende deel van de serie zullen we dit naar een hoger niveau tillen door nog enkele functies te implementeren, zoals het bewerken en verwijderen van de blogposts.
Broncode van deze tutorial is beschikbaar op GitHub. Laat het ons weten in de reacties hieronder!
