Een webapp maken vanuit kras met AngularJS en Firebase deel 6

In het vorige deel van deze serie hebben we gezien hoe een blogbericht kan worden gemaakt en alle blogberichten op de welkomstpagina kunnen worden weergegeven. In dit deel implementeren we de functie voor bewerken en verwijderen van berichten.

Ermee beginnen

Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.

git clone https://github.com/jay3dec/AngularJS_Firebase_Part5.git

Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.

cd AngularJS_Firebase_Part5 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.

De blogpost bewerken

Stap 1: Toevoegen knoppen Bewerken en Verwijderen

We beginnen met het toevoegen van bewerkings- en verwijderknoppen aan onze blogposts. In de laatste zelfstudie hebben we de blogberichten op de welkomstpagina weergegeven. Laten we een toevoegen Bewerk en een Verwijder knop naar de blogposts. 

Navigeren naar app / welkom / en open welcome.html. We hebben de bootstrap-lijstgroepcomponent gebruikt om de blogberichten weer te geven. Voeg de volgende HTML-code toe aan de list-groep component om een ​​weer te geven Bewerk en een Verwijder knop.

  
artikel titel
 
 Article.post
  BEWERK DELETE   

Sla de wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord en je zou het onderstaande scherm kunnen zien:

Stap 2: Toon Pop-up bewerken bij klikken 

We gebruiken een Bootstrap JavaScript-component met de naam Modale pop-up. Voer de jQuery- en Bootstrap-scripts in om JavaScript-componenten voor Bootstrap te gebruiken index.html.

Zodra de referenties van de scripts zijn opgenomen, voegt u de volgende pop-up HTML-code toe aan app / welkom / welcome.html.

 
 
 
 ×Dichtbij  
Post bijwerken
 
 
 
 
 Titel:  
 
 Post:  
 
 
 
 Dichtbij Publiceren 
 
 
 

Wijzig vervolgens de Bewerk knop HTML-code om toe te voegen data-toggle en data-target om de pop-up weer te geven op klik.

BEWERK

De data-target attribuut verwijst naar de ID van het HTML-element dat moet worden weergegeven in de modale pop-up.

Voeg ook een toe bij klikken evenement voor de Bewerk knoop bovenliggende ankertag zoals getoond:

Sla de wijzigingen op, start de server opnieuw en probeer in te loggen. Klik op de welkomstpagina op de welkomstpagina Bewerk knop en je zou de pop-up moeten laten weergeven.

Stap 3: vul Pop-up bewerken in 

Elke vermelding in Firebase heeft een unieke ID die we gebruiken om de specifieke recorddetails van Firebase op te halen. Om Firebase te kunnen ondervragen met de unieke ID, moeten we die ID hebben. In de vorige zelfstudie hebben we Firebase gevraagd en het geretourneerde resultaat op onze welkomstpagina weergegeven. Dit is hoe we het resultaat hebben weergegeven: 

  
artikel titel
 
 Article.post
  BEWERK DELETE   

Nu verwijderen data-toggle = "modal" van de Bewerk knop. We activeren de modale pop-up van onze controller. 

Binnen app / welkom / welcome.js, voeg een toe bericht bewerken functie die we zullen gebruiken Bewerk klik op de knop. Eerder hebben we de Firebase-URL https://blistering-heat-2473.firebaseio.com/Articles gebruikt om alle artikelen van Firebase op te halen. Om een ​​bepaalde record van Firebase op te halen, moeten we de unieke ID van het artikel toevoegen, zoals https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg. 

Daarom maken we het Firebase-object met de unieke ID-specifieke URL en verwijzen we ernaar om de artikeldetails als een object op te halen. Hier is hoe het bericht bewerken functie ziet eruit:

$ scope.editPost = function (id) var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var syn = $ firebase (firebaseObj); $ scope.postToUpdate = syn. $ asObject (); . $ ( '# EditModal') modal (); // triggert de modale pop-up

Doe open welcome.html en voeg een ngClick-richtlijn toe aan de Bewerk knop. Tijdens het toevoegen van de ngClick functie aanroepen bericht bewerken, geef de unieke ID van het artikel door, zoals hieronder getoond:

BEWERK

Vervolgens moeten we de details van de opgehaalde artikelen invullen in de modale pop-up. Omdat de details in zijn $ scope.postToUpdate, we zullen het binden aan het modale met behulp van de ngModel-richtlijn. Voeg de toe ngModel richtlijn voor de post en titel tekstgebied zoals hieronder getoond:

Sla alle wijzigingen op en start de server opnieuw op. Probeer in te loggen met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, klikt u op Bewerk knop en je zou de modale pop-up gevuld moeten hebben met de details van het artikel.

Stap 4: Implementeer de update-functionaliteit

Vervolgens implementeren we de updatefunctionaliteit. Wanneer het artikel is ingevuld in de modal-pop-up voor bewerken, kan de gebruiker de titel of het bericht wijzigen en op klikken Publiceren. Nadat op Click is geklikt, moeten we de details in Firebase bijwerken.

Voeg eerst de ngClick richtlijn voor de Publiceren knop.

Publiceren

Open app / welkom / welcome.js en voeg een toe bijwerken functieaanroep die wordt aangeroepen Publiceren klik op de knop. Binnen de updatefunctie moeten we een Firebase-object maken met behulp van de Firebase-URL die wordt toegevoegd door het unieke artikel-ID.

var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id);

De ... gebruiken fb object, maak een $ firebase voorwerp.

var article = $ firebase (fb);

Met behulp van het artikelobject bellen we de update-API om de wijzigingen in Firebase bij te werken.

artikel. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId) then (functie (ref) // Update successful, function ( fout) console.log ("Fout:", fout););

Nadat de update is voltooid, sluit u de modale pop-up. Voeg de volgende code toe om succes callback te updaten.

. $ ( '# EditModal') modale ( 'verstoppen');

Hier is het vol bijwerken functie:

$ scope.update = function () var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id); var article = $ firebase (fb); artikel. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). then (function (ref) $ ('# editModal'). modal ('hide');, function (error) console.log ("Error:", error);); 

Sla alle wijzigingen op en start de server opnieuw op. Probeer in te loggen met een geldig e-mailadres en wachtwoord. Probeer na het inloggen een bericht te bewerken en bij te werken.

De blogpost verwijderen

Laten we vervolgens de verwijderingspost-functionaliteit implementeren. Voordat we een bericht verwijderen, is het handig om een ​​pop-up voor bevestiging te tonen, dus laten we daarmee beginnen.

Stap 1: Toon Bevestiging pop-up tonen

Hier zullen we ook een Bootstrap-modaal gebruiken om een ​​bevestigingspop-up te tonen. Voeg de volgende HTML-code toe aan welcome.html:

 
 
 
 
Je gaat dit bericht voor altijd verwijderen !!
 
 
 annuleren Verwijder 
 
 
 

Pas nu het Verwijder knop om een ​​toe te voegen data-toggle en data-target attribuut zoals hieronder getoond:

DELETE

De data-toggle attribuut activeert de modale pop-up en de data-target attribuut identificeert welk HTML-blok moet worden weergegeven als de modale pop-up. 

Sla de wijzigingen op en start de server opnieuw op. Log in en klik op de Verwijder knop en je zou de pop-up voor het verwijderen van de bevestiging moeten zien.

Stap 2: Verwijder de post

Om het blogbericht te verwijderen, moeten we het artikel van Firebase ophalen. Zodra we de ID hebben, verwijderen we het artikel uit Firebase als de gebruiker op Verwijderen klikt in de modale pop-up.

Dus, verwijder eerst de data-toggle attribuut van de Verwijder knop, omdat we de modale pop-up van de controller activeren zodra het artikel is opgehaald. Voeg ook een toe ngClick richtlijn voor de Verwijder knop.

DELETE

Binnen app / welkom / welcome.js, maak een nieuwe functie aan genaamd bevestig verwijderen, die de modale pop-up activeert en ook het artikel haalt uit Firebase. Hier is wat de bevestig verwijderen functie ziet eruit als:

$ scope.confirmDelete = function (id) var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var article = $ firebase (fb); $ scope.postToDelete = article. $ asObject (); $ ( '# DeleteModal') modal (.); 

Zoals te zien is in de bovenstaande code, hebben we de Firebase object met behulp van het artikel-ID. Gebruik makend van $ firebase we hebben het artikelobject opgehaald. Met dit artikelobject kunnen we het artikel uit Firebase verwijderen.

Voeg vervolgens nog een functie toe met de naam Verwijder gepost bericht, die we zullen bellen zodra de gebruiker het verwijderen van het artikel heeft bevestigd. In de bevestig verwijderen functie waaraan we het artikelobject al hebben toegewezen $ scope.postToDelete. In de Verwijder gepost bericht functie gebruiken we de $ scope.postToDelete object om naar het artikel te verwijzen en het uit Firebase te verwijderen. Hier is hoe het Verwijder gepost bericht functie ziet eruit:

$ scope.deletePost = function () var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToDelete. $ id); var article = $ firebase (fb); artikel. $ remove (). then (function (ref) $ ('# deleteModal'). modal ('hide');, functie (fout) console.log ("Fout:", fout);) ; 

We hebben de $ remove API-methode gebruikt om het artikel uit Firebase te verwijderen. Na succesvolle verwijdering hebben we ook de zichtbaarheid van de pop-up voor het bevestigen van de verwijdering omgeschakeld.

Voeg de toe ngClick richtlijn over de Verwijder knop in de modale pop-up pop-up.

Verwijder

Sla alle wijzigingen op en start de server opnieuw op. Log in met een geldig e-mailadres en wachtwoord. Probeer na het inloggen een artikel te verwijderen.

Afsluiten

In deze zelfstudie hebben we gezien hoe u de blogpaginas die in Firebase zijn toegevoegd, kunt bewerken en verwijderen met API-methoden. In het volgende deel van de tutorial proberen we Ladda-laadindicatoren te integreren in onze applicatie. We zullen ook enkele kleine problemen oplossen die in onze applicatie voorkomen.

Laat het ons weten in de reacties hieronder!

Broncode van deze tutorial is beschikbaar op GitHub.