Share
Nella parte precedente della serie, abbiamo progettato e implementato un'interfaccia per creare un post sul blog con un titolo e un post. In questa parte vedremo come recuperare i post del blog salvati in Firebase e renderli nella nostra pagina di benvenuto.
Iniziamo clonando la parte precedente del tutorial da GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part4.git
Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularJS_Firebase_Part4 installazione npm
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.
In precedenza, quando abbiamo inserito i dati in Firebase, abbiamo semplicemente trasferito i dati nell'URL di Firebase ed è stato elencato in modo casuale in Firebase. Ma quando i dati crescono e tutto viene trasferito a Firebase diventa difficile mantenere i dati. Cercheremo quindi di organizzare i nostri dati, il che renderà più semplice l'interrogazione da Firebase.
Accedi a Firebase e vai a Gestisci app. Dovresti vedere l'URL di Firebase nella schermata del dashboard come mostrato di seguito:
Fare clic sull'icona più accanto all'URL e creare un nodo secondario chiamato articoli con un valore 0 e fare clic Inserisci. Una volta aggiunto un nodo secondario, dovresti avere qualcosa del tipo:
Come puoi vedere, abbiamo classificato il articoli dati separatamente, in modo che sia facile interrogare e recuperare i dati.
Ora vai a addPost.js e modifica l'URL di Firebase in https://blistering-heat-2473.firebaseio.com/Articles. Aggiungiamo anche l'ID e-mail dell'utente relativo al post del blog. Possiamo ottenere l'ID e-mail dal CommonProp servizio che abbiamo scritto in precedenza. Semplicemente iniettare il CommonProp servizio in AddPostCtrl controllore.
Accentsconagua
.controller ('AddPostCtrl', ['$ scope', '$ firebase', 'CommonProp', funzione ($ scope, $ firebase, CommonProp) Mentre si inseriscono i dati, includere anche il parametro dell'ID e-mail. Ecco la modifica AddPost funzione:
$ scope.AddPost = function () var title = $ scope.article.title; var post = $ scope.article.post; var firebaseObj = new 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 (" Errore: ", errore);); Salva tutte le modifiche e riavvia il server. Prova ad accedere utilizzando un indirizzo email e una password validi e crea un post sul blog. Ora se dai un'occhiata al dashboard di Firebase dovresti vedere i dettagli del post nel articoli sub nodo come mostrato:
Successivamente, aggiungiamo un componente del gruppo di liste Bootstrap per mostrare i post creati da un utente. Navigare verso app / welcome / welcome.html e dentro il div con classe contenitore, dopo il messaggio di benvenuto, aggiungi il componente del gruppo elenco come mostrato:
Titolo Titolo
Contenuti del blog post
Salva le modifiche e riavvia il server. Prova ad accedere con un indirizzo email e una password validi. Quando nella pagina di benvenuto dovresti vedere qualcosa del tipo:
Successivamente, esaminiamo i dati da Firebase utilizzando l'URL https://blistering-heat-2473.firebaseio.com/Articles.
Aperto welcome.js, e dentro il WelcomeCtrl controller crea un oggetto Firebase utilizzando l'URL precedente.
var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com/Articles");Useremo $ Firebase per ottenere dati da Firebase. Come da documenti ufficiali:
Il $ Firebase wrapper è utilizzato per sincronizzare i dati Firebase con le app Angular. Contiene alcuni metodi di supporto per scrivere dati su Firebase e strumenti per leggere i dati in raccolte o oggetti sincronizzati.var sync = $ firebase (firebaseObj);
Per ottenere dati dall'URL di Firebase come array sincronizzato, AngularFire fornisce un metodo chiamato $ asArray. Chiamiamo il $ asArray metodo sull'oggetto di sincronizzazione e assegnarlo a un altro $ portata variabile.
$ scope.articles = sync. $ asArray ();
Aggiungi anche un elemento di paragrafo nella pagina di benvenuto come mostrato:
articoli
Salva tutte le modifiche e riavvia il server. Accedi con un indirizzo email e una password validi. Una volta nella pagina di benvenuto, si dovrebbe avere il risultato della query come dati JSON nel file $ scope.articles elemento vincolante.
["emailId": "[email protected]", "post": "Questo è il mio primo post su questa piattaforma.", "title": "Hello !!" , "emailId": "[email protected]", "post": "Buona notte per stanotte", "titolo": "GoodBye"]
Dal momento che abbiamo i dati richiesti da Firebase nel $ scope.articles variabile, possiamo legare i dati al nostro elemento dell'elenco di pagine di benvenuto. Useremo la direttiva AngularJS ngRepeat per ripetere i dati attraverso il gruppo di elenchi Bootstrap. Ecco il codice HTML del gruppo di elenchi:
Titolo Titolo
Contenuti del blog post
Aggiungi il ngRepeat direttiva come mostrato al div principale.
ng-repeat = "articolo in articoli"
Il ngRepeat direttiva itera sopra la variabile articoli e crea l'HTML all'interno del gruppo di elenchi div per ciascun elemento. Quindi, modifica il codice HTML mostrato:
titolo dell'articolo
Article.post
Salva le modifiche e riavvia il server. Accedi utilizzando un indirizzo email e una password e, una volta nella pagina di benvenuto, dovresti visualizzare l'elenco degli articoli aggiunti dalla pagina Aggiungi post.
Ora vai a http: // localhost: 8000 / app / # / addPost e aggiungi un altro post. Poiché non abbiamo ancora aggiunto un reindirizzamento alla pagina di benvenuto dopo aver creato un post, naviga manualmente su http: // localhost: 8000 / app / # / welcome e dovresti vederlo nell'elenco.
Una volta che il post è stato aggiunto, dobbiamo reindirizzare l'utente alla pagina di benvenuto. Aperto app / addPost / addPost.js e iniettare $ location nel AddPostCtrl controller. Sopra fb. $ spinta callback di successo, aggiungi un reindirizzamento a benvenuto pagina.
fb. $ push (title: title, post: post, emailId: CommonProp.getUser ()). then (function (ref) console.log (ref); $ location.path ('/ welcome'); , function (error) console.log ("Errore:", errore););Aprire app / welcome / welcome.html e modificare il collegamento Aggiungi post href per reindirizzare alla pagina Aggiungi post come mostrato:
Aggiungi post
Salva tutte le modifiche e riavvia il server. Accedi con un indirizzo email e una password validi e prova a creare un post e dovresti essere in grado di visualizzare il post nell'elenco delle pagine di benvenuto.
In questo tutorial, abbiamo visto come interrogare i dati memorizzati in Firebase usando AngularFire. Abbiamo creato un'interfaccia per rendere il post del blog creato da un utente come un elenco nella pagina di benvenuto. Abbiamo anche risolto un paio di piccoli problemi.
Nella prossima parte della serie, porteremo questo al livello successivo implementando alcune funzionalità aggiuntive come la modifica e l'eliminazione dei post del blog.
Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri nei commenti qui sotto!
