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

I den forrige delen av denne serien så vi hvordan du lager et blogginnlegg og viser alle blogginnleggene på velkomstsiden. I denne delen implementerer vi redigerings- og slettingsfunksjonen.

Starter

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

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

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

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

Redigerer blogginnlegget

Trinn 1: Legge til Rediger og Slett knapper

Vi starter med å legge til redigere og slette knapper til våre blogginnlegg. I den siste opplæringen viste vi blogginnleggene på velkomstsiden. La oss legge til en Redigere og a Slett knappen til blogginnleggene. 

Navigere til app / velkommen / og åpne opp velkommen.html. Vi brukte bootstrap list-gruppen komponenten til å vise blogginnleggene. Legg til følgende HTML-kode i list-gruppe komponent for å vise en Redigere og a Slett knapp.

  
Article.title
 
Article.post
  REDIGERE SLETT   

Lagre endringene og start serveren på nytt. Logg inn med en gyldig e-postadresse og et passord, og du bør kunne se nedenstående skjermbilde:

Trinn 2: Vis Rediger popup på Klikk 

Vi bruker en Bootstrap JavaScript-komponent kalt Modal popup. For å kunne bruke Bootstrap JavaScript-komponenter, inkludere jQuery og Bootstrap-skriptene i index.html.

Når referanseskriptene er inkludert, legg til følgende popup-HTML-kode til app / velkommen / velkommen.html.

 
 
 
 xLukk  
Oppdater innlegg
 
 
 
 
 Tittel:  
 
 Post:  
 
 
 
 Lukk publisere 
 
 
 

Deretter endrer du Redigere knapp HTML kode å inkludere data-vippe og data-target for å gjøre popup-showet på klikk.

REDIGERE

De data-target Tilordne poeng til IDen til HTML-elementet som må vises i modal popup.

Legg også til en ved trykk hendelse til Redigere knappen forankret anker som vist:

Lagre endringene, start serveren på nytt, og prøv å logge inn. Når du er på velkomstsiden, klikker du på Redigere knappen og du burde ha popupen vist.

Trinn 3: Befolk rediger popupen 

Hver oppføring i Firebase har en unik ID, som vi skal bruke for å hente spesielle rekorddetaljer fra Firebase. For å kunne spørre Firebase med den unike ID-en, må vi ha den IDen. I den forrige opplæringen spurte vi Firebase og ga det returnerte resultatet på vår velkomstside. Slik viser vi resultatet: 

  
Article.title
 
Article.post
  REDIGERE SLETT   

Fjern nå data-vippe = "modal" fra Redigere knapp. Vi utløser den modale popupen fra vår kontroller. 

Innsiden app / velkommen / welcome.js, legg til en editPost funksjon som vi vil ringe på Redigere klikk på knappen. Tidligere brukte vi Firebase URL https://blistering-heat-2473.firebaseio.com/Articles for å hente alle artikler fra Firebase. For å hente en bestemt plate fra Firebase, må vi legge til den unike IDen til artikkelen, som https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg. 

Så skal vi opprette Firebase-objektet ved hjelp av den unike ID-spesifikke nettadressen, og deretter referere den til å hente artikkeldetaljer som et objekt. Her er hvordan editPost funksjonen ser ut:

$ scope.editPost = funksjon (id) var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var syn = $ firebase (firebaseObj); $ scope.postToUpdate = syn. $ asObject (); . $ ( '# EditModal') modal (); // utløser den modale popupen

Åpne opp velkommen.html og legg til et ngClick-direktiv til Redigere knapp. Mens du legger til ngClick funksjonsanrop til editPost, pass den unike iden til artikkelen som vist nedenfor:

REDIGERE

Deretter må vi fylle ut detaljene for de hentede artiklene i den modale popupen. Siden detaljene er i $ scope.postToUpdate, Vi binder den til modal ved hjelp av ngModel-direktivet. Legg til ngModel direktiv til post og tittel tekstområde som vist nedenfor:

Lagre alle endringene og start serveren på nytt. Prøv å logge på med en gyldig e-postadresse og et passord. Når du er logget på, klikker du på Redigere knappen og du bør ha den modale popupen befolket med artikkeldetaljene.

Trinn 4: Implementer oppdateringsfunksjonaliteten

Deretter implementerer vi oppdateringsfunksjonaliteten. Når artikkelen er blitt fylt i redigeringsmodellen, kan brukeren endre tittelen eller posten og klikke publisere. Når publisering er klikket, må vi oppdatere detaljene i Firebase.

Først legger du til ngClick direktiv til publisere knapp.

publisere

Åpen app / velkommen / welcome.js og legg til en Oppdater funksjonsanrop som er påkalt publisere klikk på knappen. Inne i oppdateringsfunksjonen må vi opprette et Firebase-objekt ved hjelp av Firebase-URLen vedlagt den unike artikkelen-IDen.

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

Bruker fb objekt, opprett en $ Fire gjenstand.

varartikkel = $ brannbase (fb);

Ved å bruke artikkelen objektet, ringer vi oppdaterings-API for å oppdatere endringene til Firebase.

artikkel. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). deretter (funksjon (ref) // Oppdater vellykket, funksjon feil) console.log ("Feil:", feil););

Når oppdateringen er vellykket, lukk den modale popupen. Legg til følgende kode for å oppdatere suksess tilbakeringing.

. $ ( '# EditModal') modal ( 'skjul');

Her er den fulle Oppdater funksjon:

$ scope.update = function () var fb = ny Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id); varartikkel = $ brannbase (fb); artikkel. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). deretter (funksjon (ref) $ ('# editModal'). modal ('hide');, 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. Når du er logget på, kan du prøve å redigere og oppdatere et innlegg.

Slette blogginnlegget

Deretter la vi implementere slettingsfunksjonen. Før du sletter et innlegg, er det mulig å vise en bekreftelsespop, så la oss starte med det.

Trinn 1: Vis Slett Bekreftelse Popup

Her bruker vi også en Bootstrap Modal for å vise en bekreftelsespopp. Legg til følgende HTML-kode til velkommen.html:

 
 
 
 
Du kommer til å slette dette innlegget for alltid !!
 
 
 Avbryt Slett 
 
 
 

Nå, endre Slett knappen for å legge til en data-vippe og data-target attributt som vist nedenfor:

SLETT

De data-vippe attributt utløser modal popup, og data-target attributt identifiserer hvilken HTML-blokk som skal vises som modal popup. 

Lagre endringene og start serveren på nytt. Logg inn og klikk på Slett knappen, og du bør se slettingsbekreftelse popup.

Trinn 2: Slett posten

Nå, for å kunne slette blogginnlegget, må vi hente artikkelen fra Firebase. Når vi har ID, hvis brukeren klikker Slett fra den modale popupen, fjerner vi artikkelen fra Firebase.

Så fjern først data-vippe attributt fra Slett knappen, siden vi vil utløse den modale popupen fra kontrolleren når artikkelen er hentet. Legg også til en ngClick direktiv til Slett knapp.

SLETT

Innsiden app / velkommen / welcome.js, opprett en ny funksjon kalt confirmdelete, som vil utløse den modale popupen og også hente artikkelen fra Firebase. Her er hva confirmdelete funksjonen ser ut som:

$ scope.confirmDelete = funksjon (id) var fb = ny Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); varartikkel = $ brannbase (fb); $ scope.postToDelete = artikkel. $ asObject (); $ ( '# DeleteModal') modal (.); 

Som vist i koden ovenfor har vi opprettet Fire objekt ved hjelp av artikkel-IDen. Ved hjelp av $ Fire Vi har hentet artikkelen objektet. Ved hjelp av dette artikkelen objektet vil vi kunne fjerne artikkelen fra Firebase.

Deretter legger du til en annen funksjon som heter deletePost, som vi ringer når brukeren bekrefter artikkelen slettet. I confirmdelete funksjon vi har allerede tildelt artikkelen objektet til $ scope.postToDelete. I deletePost funksjon vi skal bruke $ scope.postToDelete motsette seg å referere til artikkelen og fjerne den fra Firebase. Her er hvordan deletePost funksjonen ser ut:

$ scope.deletePost = function () var fb = ny Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToDelete. $ id); varartikkel = $ brannbase (fb); artikkel. $ remove (). deretter (funksjon (ref) $ ('# deleteModal') .modal ('skjul');, funksjon (feil) console.log ("Feil:", feil);) ; 

Vi har brukt $ fjerne API-metoden for å fjerne artikkelen fra Firebase. Ved vellykket sletting har vi også skiftet synligheten til slettingsbekreftelsen.

Legg til ngClick direktiv på Slett knappen i slett modal popup.

Slett

Lagre alle endringene og start serveren på nytt. Logg inn med en gyldig e-postadresse og passord. Når du er logget på, kan du prøve å slette en artikkel.

Wrapping Up

I denne veiledningen så vi hvordan du redigerer og sletter blogginnleggene i Firebase ved hjelp av API-metoder. I neste del av opplæringen vil vi prøve å integrere Last innlasting indikatorer i vår søknad. Vi vil også fikse noen små problemer som finnes i vår søknad.

Gi oss beskjed om dine tanker i kommentarene nedenfor!

Kildekode fra denne opplæringen er tilgjengelig på GitHub.