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

Nel precedente tutorial, abbiamo implementato la funzionalità di registrazione e abbiamo anche visto come utilizzare i servizi AngularJS per condividere i dati tra i controller. In questa parte della serie di tutorial, creeremo un'interfaccia per l'utente che ha effettuato l'accesso per creare un post sul blog.

Iniziare 

Iniziamo clonando la terza parte del tutorial da GitHub.

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

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

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

Creazione della pagina Aggiungi post

Abbiamo bisogno di una pagina con cui l'utente può creare e pubblicare post sul blog. Aggiungiamo i modelli e i file necessari per creare la pagina Aggiungi post.

Vai a AngularJS_Firebase_Part3 / app directory e creare una cartella chiamata addPost. Dentro addPost creare un file HTML chiamato addPost.html e addPost.js. Nel addPost.html aggiungi il seguente codice HTML:

       
 
  
 
 
 
 
  
Crea post
  
 Titolo 
  
 
  
 Inviare 
  
 
  
  
  
 
 
 
 
  
 
AngularJS & Firebase Blog App
 
  

Dentro addPost.js, definiremo i percorsi per la vista Aggiungi post. $ routeProvider ha un metodo chiamato quando, che useremo per creare un percorso per il nostro addPost vista. Imposteremo a TemplateURL quale sarebbe reso nel index.html. Imposteremo anche un controllore (logica che controlla una vista) per la nuova creazione $ portata del addPost vista. Ecco come addPost.js finalmente guarda:

'usare rigoroso'; angular.module ('myApp.addPost', ['ngRoute']) .config (['$ routeProvider', funzione ($ routeProvider) $ routeProvider.when ('/ addPost', templateUrl: 'addPost / addPost.html ', controller:' AddPostCtrl ');]) .controller (' AddPostCtrl ', [' $ scope ', function ($ scope) ]);

Includi il myApp.addPost modulo in app.js.

angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome', 'myApp.addPost' // Modulo appena aggiunto])

Inoltre, aggiungere un riferimento al addPost.js nel app / index.html pagina.

Salva le modifiche, riavvia il server e indirizza il browser a http: // localhost: 8000 / app / # / addPost e dovresti riuscire a visualizzare la pagina di aggiunta.

Convalida dei campi Aggiungi post

Innanzitutto, è necessario aggiungere una direttiva ngModel alla casella di testo di input e all'area di testo nella pagina di aggiunta per abilitare il associazione dati bidirezionale.

Quando un utente pubblica un post sul blog, dovrebbe avere un titolo e un post. Quindi aggiungeremo la convalida per verificare se un post del blog ha titolo e post. Se vengono forniti il ​​titolo e il post, abiliteremo il pulsante di pubblicazione e l'utente può pubblicare il suo post sul blog. Useremo una direttiva ngDisabled per disabilitare il pulsante di pubblicazione. Aggiungi il ngDisabled direttiva al pulsante di pubblicazione come mostrato.

Come visto nel codice sopra, ngDisabled disabiliterebbe il pulsante di pubblicazione quando non viene fornito il titolo o il post dell'articolo.

Implementazione della funzionalità Aggiungi post

Successivamente, salveremo il titolo e il post dell'articolo in Firebase quando l'utente fa clic sul pulsante di pubblicazione. Per salvare i dati su Firebase, utilizzeremo l'API $ push.

Aggiungi il ngController direttiva al corpo di addPost.html e aggiungere anche la direttiva ngSubmit al modulo in addPost.html.

Aprire addPost.js e aggiungere una nuova funzione chiamata AddPost dentro il AddPostCtrl controller come mostrato:

.controller ('AddPostCtrl', ['$ scope', function ($ scope) $ scope.AddPost = function () // Aggiungi la logica di post sarà qui]);

Avremo bisogno $ Firebase per inviare dati a Firebase Db, quindi iniettare il file $ Firebase modulo nel AddPostCtrl controllore.

.controller ('AddPostCtrl', ['$ scope', '$ firebase', function ($ scope, $ firebase) 

Crea un oggetto Firebase usando l'URL di Firebase.

var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com");

utilizzando firebaseObj creeremo un'istanza di $ Firebase che useremo per inviare dati a Firebase.

var fb = $ firebase (firebaseObj);

Leggi il titolo e il post inseriti dall'utente utilizzando $ portata. 

var title = $ scope.article.title; var post = $ scope.article.post;

Dato che abbiamo il titolo e il post, chiameremo l'API push di Firebase per salvare i dati in Firebase.

fb. $ push (title: title, post: post). then (function (ref) console.log (ref);, function (error) console.log ("Errore:", errore); );

Ora, salva tutte le modifiche, riavvia il server e prova ad aggiungere un nuovo post sul blog. Dopo aver fatto clic sul pulsante di pubblicazione, controlla la console del browser per l'oggetto di riferimento. Successivamente, accedi al tuo account Firebase e dovresti essere in grado di vedere i dati.

Avvolgendolo

In questa parte della serie abbiamo creato un'interfaccia per aggiungere o pubblicare post sul blog. Nella parte successiva di questa serie creeremo un'interfaccia per recuperare e visualizzare tutti i post del blog aggiunti dagli utenti.

Il codice sorgente di questo tutorial è disponibile su GitHub. Fateci sapere i vostri pensieri nei commenti qui sotto!