Creazione di un'app Web da zero utilizzando AngularJS e Firebase parte 6

Nella parte precedente di questa serie, abbiamo visto come creare un post sul blog e visualizzare tutti i post del blog nella pagina di benvenuto. In questa parte, implementeremo la modifica e elimineremo la funzionalità post.

Iniziare

Iniziamo clonando la parte precedente del tutorial da GitHub.

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

Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.

cd AngularJS_Firebase_Part5 npm install

Una volta installate le dipendenze, avviare il server.

inizio di npm

Puntare il browser su http: // localhost: 8000 / app / # / home e si dovrebbe avere l'applicazione in esecuzione.

Modifica del post del blog

Passaggio 1: aggiunta dei pulsanti Modifica ed Elimina

Inizieremo aggiungendo i pulsanti modifica ed elimina ai post del nostro blog. Nell'ultimo tutorial, abbiamo mostrato i post del blog nella pagina di benvenuto. Aggiungiamo un modificare e a Elimina pulsante per i post del blog.

Navigare verso app / welcome / e apri welcome.html. Abbiamo usato il componente del gruppo di liste bootstrap per visualizzare i post del blog. Aggiungi il seguente codice HTML al list-gruppo componente per visualizzare un modificare e a Elimina pulsante.

  titolo dell'articolo
  Article.post

Salva le modifiche e riavvia il server. Accedi utilizzando un indirizzo email e una password validi e dovresti essere in grado di vedere la schermata seguente:

Passaggio 2: mostra la modifica del popup al clic

Useremo un componente JavaScript Bootstrap chiamato popup modale. Per utilizzare i componenti JavaScript Bootstrap, includere gli script jQuery e Bootstrap in index.html.

Una volta inclusi i riferimenti degli script, aggiungere il seguente codice HTML popup a app / welcome / welcome.html.

     Aggiorna post
 
    Titolo:  
  Inviare:

Quindi, modificare il modificare pulsante codice HTML da includere dati ginocchiera e data-obiettivo per far apparire il popup al click.

Il data-obiettivo attribuisce punti all'ID dell'elemento HTML che deve essere mostrato nel popup modale.

Aggiungi anche un al clic evento al modificare tag di ancoraggio padre pulsante come mostrato:

Salvare le modifiche, riavviare il server e provare ad accedere. Quando si è nella pagina di benvenuto, fare clic su modificare pulsante e dovresti visualizzare il popup.

Passaggio 3: compilare Popup modifica

Ogni voce in Firebase ha un ID univoco, che useremo per recuperare i particolari particolari del record da Firebase. Per poter interrogare Firebase con l'ID univoco, abbiamo bisogno di avere quell'ID. Nel precedente tutorial, abbiamo interrogato Firebase e reso il risultato restituito nella nostra pagina di benvenuto. Ecco come abbiamo reso il risultato:

  titolo dell'articolo
  Article.post

Ora rimuovi Dati ginocchiera = "modale" dal modificare pulsante. Attiveremo il popup modale dal nostro controller.

Dentro app / Benvenuti / welcome.js, aggiungi un modifica post funzione che chiameremo modificare pulsante clic. In precedenza, abbiamo utilizzato l'URL Firebase https://blistering-heat-2473.firebaseio.com/Articles per recuperare tutti gli articoli da Firebase. Per recuperare un particolare record da Firebase, dovremo aggiungere l'ID univoco dell'articolo, come https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg.

Creeremo quindi l'oggetto Firebase utilizzando l'URL specifico dell'ID univoco e quindi lo faremo riferimento per recuperare i dettagli dell'articolo come oggetto. Ecco come modifica post aspetto della funzione:

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

Aprire welcome.html e aggiungere una direttiva ngClick al modificare pulsante. Aggiungendo il ngClick chiamata di funzione a modifica post, passare l'ID univoco dell'articolo come mostrato di seguito:

Successivamente, è necessario popolare i dettagli degli articoli recuperati nel popup modale. Poiché i dettagli sono in $ scope.postToUpdate, lo legheremo al modale usando la direttiva ngModel. Aggiungi il ngModel direttiva al inviare e titolo area di testo come mostrato di seguito:

Salva tutte le modifiche e riavvia il server. Prova ad accedere utilizzando un indirizzo email e una password validi. Una volta effettuato l'accesso, fai clic su modificare pulsante e dovresti avere il popup modale popolato con i dettagli dell'articolo.

Passaggio 4: implementare la funzionalità di aggiornamento

Successivamente implementeremo la funzionalità di aggiornamento. Quando l'articolo è stato popolato nel popup modale di modifica, l'utente può modificare il titolo o il post e fare clic Pubblicare. Dopo aver fatto clic su Pubblica, è necessario aggiornare i dettagli in Firebase.

Innanzitutto, aggiungi il ngClick direttiva al Pubblicare pulsante.

Aperto app / Benvenuti / welcome.js e aggiungere un aggiornare chiamata di funzione che viene chiamata Pubblicare pulsante clic. All'interno della funzione di aggiornamento, dobbiamo creare un oggetto Firebase utilizzando l'URL Firebase aggiunto dall'ID articolo univoco.

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

Usando il fb oggetto, creare a $ Firebase oggetto.

var article = $ firebase (fb);

Utilizzando l'oggetto dell'articolo, chiameremo l'API di aggiornamento per aggiornare le modifiche a Firebase.

articolo. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). then (function (ref) // Update successful, function ( errore) console.log ("Errore:", errore););

Una volta che l'aggiornamento ha avuto successo, chiudi il popup modale. Aggiungere il seguente codice per aggiornare la callback di successo.

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

Ecco il pieno aggiornare funzione:

$ scope.update = function () var fb = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles/" + $ scope.postToUpdate. $ id); var article = $ firebase (fb); articolo. $ update (title: $ scope.postToUpdate.title, post: $ scope.postToUpdate.post, emailId: $ scope.postToUpdate.emailId). then (function (ref) $ ('# editModal'). modale ('nascondi');, funzione (errore) console.log ("Errore:", errore););

Salva tutte le modifiche e riavvia il server. Prova ad accedere utilizzando un indirizzo email e una password validi. Una volta effettuato l'accesso, prova a modificare e aggiornare un post.

Eliminazione del post del blog

Quindi, implementiamo la funzionalità di eliminazione del post. Prima di eliminare un post, è opportuno mostrare un popup di conferma, quindi iniziamo con quello.

Passaggio 1: mostra Elimina popup di conferma

Anche qui useremo un modal Bootstrap per mostrare un popup di conferma. Aggiungi il seguente codice HTML a welcome.html:

    Stai per eliminare questo post per sempre !!

Adesso modifica il Elimina pulsante per aggiungere a dati ginocchiera e data-obiettivo attributo come mostrato di seguito:

Il dati ginocchiera l'attributo attiva il popup modale e il data-obiettivo attributo identifica quale blocco HTML mostrare come popup modale.

Salva le modifiche e riavvia il server. Accedi e fai clic su Elimina pulsante e dovresti vedere il popup di conferma dell'eliminazione.

Passaggio 2: Elimina il post

Ora, per eliminare il post del blog, dobbiamo recuperare l'articolo da Firebase. Una volta ottenuto l'ID, se l'utente fa clic su Elimina dal popup modale, rimuoveremo l'articolo da Firebase.

Quindi, prima rimuovere il dati ginocchiera attributo dal Elimina pulsante, dal momento che verrà attivato il popup modale dal controller una volta che l'articolo è stato recuperato. Inoltre, aggiungere un ngClick direttiva al Elimina pulsante.

Dentro app / Benvenuti / welcome.js, creare una nuova funzione chiamata conferma cancellazione, che attiverà il popup modale e recupererà anche l'articolo da Firebase. Ecco cosa è conferma cancellazione la funzione assomiglia a:

$ 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') modali ().;

Come visto nel codice sopra, abbiamo creato il Firebase oggetto usando l'ID dell'articolo. utilizzando $ Firebase abbiamo recuperato l'oggetto dell'articolo. Usando questo oggetto articolo saremo in grado di rimuovere l'articolo da Firebase.

Successivamente, aggiungi un'altra funzione chiamata deletePost, che chiameremo una volta che l'utente confermerà la cancellazione dell'articolo. Nel conferma cancellazione funzione a cui è già stato assegnato l'oggetto article $ scope.postToDelete. Nel deletePost funzione useremo il $ scope.postToDelete oggetto di riferirsi all'articolo e rimuoverlo da Firebase. Ecco come deletePost aspetto della funzione:

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

Abbiamo utilizzato il metodo $ remove API per rimuovere l'articolo da Firebase. In caso di cancellazione riuscita, abbiamo anche attivato la visibilità del popup di conferma dell'eliminazione.

Aggiungi il ngClick direttiva sul Elimina pulsante nel popup modale di eliminazione.

Salva tutte le modifiche e riavvia il server. Accedi utilizzando un indirizzo email e una password validi. Una volta effettuato l'accesso, prova a eliminare un articolo.

Avvolgendo

In questo tutorial, abbiamo visto come modificare ed eliminare i post del blog aggiunti in Firebase utilizzando i metodi API. Nella prossima parte del tutorial, cercheremo di integrare gli indicatori di caricamento Ladda nella nostra applicazione. Sistemeremo anche alcuni piccoli problemi esistenti nella nostra applicazione.

Fateci sapere i vostri pensieri nei commenti qui sotto!

Il codice sorgente di questo tutorial è disponibile su GitHub.

Codice