Crearea unei aplicații Web de la zero folosind AngularJS și Firebase Partea 6

În partea anterioară a acestei serii, am văzut cum să creați o postare în blog și să afișați toate mesajele de pe pagina de întâmpinare. În această parte, vom implementa funcția de editare și ștergere a postărilor.

Noțiuni de bază

Să începem prin clonarea părții anterioare a tutorialului de la GitHub.

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

După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularJS_Firebase_Part5 Instalare npm

După instalarea dependențelor, porniți serverul.

npm start

Punctați browser-ul la http: // localhost: 8000 / app / # / home și ar trebui să aveți aplicația să ruleze.

Editarea postării de pe blog

Pasul 1: Adăugarea butoanelor Editare și ștergere

Vom începe prin adăugarea butoanelor de editare și ștergere a postărilor din blog. În ultimul tutorial, am afișat postările de pe pagina de bun venit. Să adăugăm un Editați | × și a Șterge butonul pentru posturile din blog. 

Navigheaza catre app / de bun venit / și se deschide welcome.html. Am folosit componenta grup-list de bootstrap pentru a afișa postările din blog. Adăugați următorul cod HTML la Lista-grup pentru a afișa un Editați | × și a Șterge buton.

  
titlul articolului
 
Article.post
  EDITAȚI | × ȘTERGE   

Salvați modificările și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă valabilă și ar trebui să vedeți ecranul de mai jos:

Pasul 2: Afișați opțiunea de editare pe clic 

Vom folosi o componentă JavaScript Bootstrap denumită pop-up modal. Pentru a utiliza componentele JavaScript Bootstrap, includeți scripturile jQuery și Bootstrap în index.html.

După ce sunt incluse referințele pentru scripturi, adăugați următorul cod HTML popup app / de bun venit / welcome.html.

 
 
 
 ×Închide  
Actualizați postarea
 
 
 
 
 Titlu:  
 
 Post:  
 
 
 
 Închide Publica 
 
 
 

Apoi, modificați Editați | × butonul HTML pentru a include date de comutare și date-țintă pentru a face afișarea pop-up la clic.

EDITAȚI | ×

date-țintă atributul indică ID-ul elementului HTML care trebuie să fie afișat în fereastra pop-up modală.

Adăugați și un onclick eveniment la Editați | × butonul de ancorare parentală după cum se arată:

Salvați modificările, reporniți serverul și încercați să vă conectați. Când vă aflați pe pagina de întâmpinare, faceți clic pe Editați | × și ar trebui să aveți afișat pop-up.

Pasul 3: Completați popupul de editare 

Fiecare intrare în Firebase are un ID unic, pe care îl vom folosi pentru a prelua detaliile înregistrate din Firebase. Pentru a interoga Firebase cu codul unic, trebuie să avem acel ID. În tutorialul anterior, am interogat Firebase și am redat rezultatul returnat în pagina noastră de bun venit. Iată cum am obținut rezultatul: 

  
titlul articolului
 
Article.post
  EDITAȚI | × ȘTERGE   

Acum eliminați date-comutare = "modal" de la Editați | × buton. Vom declanșa un pop-up modal de la controlorul nostru. 

Interior app / de bun venit / welcome.js, adăugați un editează postarea funcție pe care o vom apela Editați | × clic pe buton. Anterior, am folosit Firebase URL https://blistering-heat-2473.firebaseio.com/Articles pentru a prelua toate articolele de la Firebase. Pentru a prelua o înregistrare specială de la Firebase, va trebui să adăugăm codul unic al articolului, cum ar fi https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg. 

Așadar, vom crea obiectul Firebase utilizând adresa URL specifică unică și apoi vom face trimitere pentru a prelua detaliile articolului ca obiect. Iată cum editează postarea funcția arată:

$ scope.editPost = funcție (id) var firebaseObj = Firebase nouă ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); var sinc = $ firebase (firebaseObj); $ scope.postToUpdate = fișierul $ asObject (); . $ ( '# EditModal') modal (); // declanșează pop-up-ul modal

Deschide welcome.html și adăugați o directivă ngClick la Editați | × buton. În timp ce adăugați ngClick apel la funcția editează postarea, treceți codul unic al articolului, după cum se arată mai jos:

EDITAȚI | ×

Apoi, trebuie să completați detaliile articolelor extrase în fereastra pop-up modală. Din moment ce detaliile sunt înăuntru $ scope.postToUpdate, o vom lega la modal folosind directiva ngModel. Adaugă ngModel directivă post și titlu zona de text după cum se arată mai jos:

Salvați toate modificările și reporniți serverul. Încercați să vă conectați utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, faceți clic pe Editați | × și ar trebui să aveți popupul populate cu detaliile articolului.

Pasul 4: Implementați funcția de actualizare

Apoi vom implementa funcționalitatea de actualizare. Când articolul a fost poprit în fereastra de modificare modală, utilizatorul poate modifica titlul sau postarea și poate da clic Publica. Odată ce a fost făcut clic pe Publish, trebuie să actualizăm detaliile în Firebase.

Mai întâi, adăugați ngClick directivă Publica buton.

Publica

Deschis app / de bun venit / welcome.js și adăugați un Actualizați apel care este apelat Publica clic pe buton. În cadrul funcției de actualizare, trebuie să creați un obiect Firebase utilizând adresa URL Firebase adăugată de ID-ul unic al articolului.

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

Utilizarea pensiune completă obiect, creați un $ firebase obiect.

articolul var = $ firebase (fb);

Utilizând obiectul articol, vom apela API-ul de actualizare pentru a actualiza modificările Firebase.

articolul update: title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId), apoi (funcția (ref) // Update successful eroare) console.log ("Eroare:", eroare););

Odată ce actualizarea are succes, închideți fereastra pop-up modală. Adăugați următorul cod pentru a actualiza apelul de apel de succes.

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

Aici este plinul Actualizați funcţie:

$ scope.update = function () var fb = noua Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate $ id); articolul var = $ firebase (fb); articolul update: title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId), apoi (function (ref) $ ('editModal'). modal ('ascunde');, funcția (eroare) console.log ("Eroare:", eroare);); 

Salvați toate modificările și reporniți serverul. Încercați să vă conectați utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, încercați să editați și să actualizați o postare.

Ștergerea postării din blog

Apoi, să implementăm funcția de ștergere post. Înainte de a șterge o postare, este capabil să afișeze un popup de confirmare, deci începeți cu asta.

Pasul 1: Afișați popup Confirmare ștergere

De asemenea, vom folosi o modalitate Bootstrap pentru a afișa un popup de confirmare. Adăugați următorul cod HTML la welcome.html:

 
 
 
 
Veți șterge acest post pentru totdeauna !!
 
 
 Anulare Șterge 
 
 
 

Acum, modificați Șterge pentru a adăuga o date de comutare și date-țintă atributul după cum se arată mai jos:

ȘTERGE

date de comutare atributul declanșează popupul modal și date-țintă atributul identifică ce bloc HTML va fi afișat ca pop-up modal. 

Salvați modificările și reporniți serverul. Conectați-vă și faceți clic pe Șterge și ar trebui să vedeți popup-ul de confirmare a ștergerii.

Pasul 2: Ștergeți mesajul

Acum, pentru a șterge postarea pe blog, trebuie să preluăm articolul din Firebase. Odată ce avem ID-ul, dacă utilizatorul dă clic pe Șterge din fereastra pop-up modală, vom elimina articolul din Firebase.

Deci, mai întâi scoateți date de comutare atribut de la Șterge , deoarece vom declanșa afișarea modală de la controler după ce articolul a fost preluat. De asemenea, adăugați un ngClick directivă Șterge buton.

ȘTERGE

Interior app / de bun venit / welcome.js, creați o nouă funcție numită confirmă ștergerea, care va declanșa pop-up-ul modal și de asemenea să aducă articolul din Firebase. Iată ce este confirmă ștergerea funcționează astfel:

$ scope.confirmDelete = funcția (id) var fb = noua Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + id); articolul var = $ firebase (fb); $ scope.postToDelete = articol $ asObject (); $ ( '# DeleteModal') modal ().; 

Așa cum am văzut în codul de mai sus, am creat Firebase obiect utilizând ID-ul articolului. Utilizarea $ firebase am recuperat obiectul articol. Utilizând acest obiect din articol, vom putea elimina articolul din Firebase.

Apoi, adăugați o altă funcție numită deletePost, pe care o vom apela după ce utilizatorul confirmă ștergerea articolului. În confirmă ștergerea la care am atribuit deja obiectul articol $ scope.postToDelete. În deletePost vom folosi funcția $ scope.postToDelete obiect să se refere la articolul și să îl elimine din Firebase. Iată cum deletePost funcția arată:

$ scope.deletePost = funcția () var fb = noua Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToDelete $ id); articolul var = $ firebase (fb); articolul $ (delete)), funcția (eroare) console.log ("Eroare:", eroare)) ; 

Am folosit metoda $ remove API pentru a elimina articolul din Firebase. În cazul ștergerii reușite, am redirecționat și vizibilitatea ferestrei de confirmare a ștergerii.

Adaugă ngClick directivă privind Șterge în meniul de ștergere modală.

Șterge

Salvați toate modificările și reporniți serverul. Conectați-vă utilizând o adresă de e-mail și o parolă valide. După ce v-ați conectat, încercați să ștergeți un articol.

Înfășurarea în sus

În acest tutorial, am văzut cum să editați și să ștergeți postările de blog adăugate în Firebase utilizând metodele API. În următoarea parte a tutorialului, vom încerca să integrăm indicatorii de încărcare Ladda în aplicația noastră. De asemenea, vom remedia unele probleme mici existente în aplicația noastră.

Spuneți-ne gândurile dvs. în comentariile de mai jos!

Codul sursă din acest tutorial este disponibil pe GitHub.